VUE+Element UI实现简单的表格行内编辑效果的示例的代码


Posted in Javascript onOctober 31, 2018

原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示

效果示例地址

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="external nofollow" >
  <style>
    * {
  margin: 0;
  padding: 0
}
body {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  overflow: auto;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.tb-edit .el-input {
  display: none
}
.tb-edit .current-row .el-input {
  display: block
}
.tb-edit .current-row .el-input+span {
  display: none
}
  </style>
</head>

<body>
  <div id="app">
    <el-table :data="tableData" class="tb-edit" style="width: 100%" highlight-current-row @row-click="handleCurrentChange">
      <el-table-column label="日期" width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.date" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.date}}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.name" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.address}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>数据:{{tableData}}</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    },
    methods: {
      handleCurrentChange(row, event, column) {
        console.log(row, event, column, event.currentTarget)
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  })
</script> 
</html>

根据原理自定义效果

VUE+Element UI实现简单的表格行内编辑效果的示例的代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
vue 中filter的多种用法
Apr 26 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
微信小程序实现签到功能
Oct 31 #Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 #Javascript
微信小程序实现自动定位功能
Oct 31 #Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 #Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
vue+iview 实现可编辑表格的示例代码
Oct 31 #Javascript
详解vue 项目白屏解决方案
Oct 31 #Javascript
You might like
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
php计算函数执行时间的方法
2015/03/20 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
英国森林假期:Forest Holidays
2021/01/01 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
日语专业毕业生求职信
2013/12/04 职场文书
采购主管的岗位职责
2013/12/17 职场文书
购房协议书范本
2014/04/11 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
走进敬老院活动总结
2014/07/10 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
奔腾年代观后感
2015/06/09 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
python之json文件转xml文件案例讲解
2021/08/07 Python
Python OpenCV形态学运算示例详解
2022/04/07 Python