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 相关文章推荐
js工具方法弹出蒙版
May 08 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 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
thinkphp分页实现效果
2016/10/13 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
在新窗口打开超链接的方法小结
2013/04/14 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
python列表操作实例
2015/01/14 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
django框架自定义用户表操作示例
2018/08/07 Python
python使用udp实现聊天器功能
2018/12/10 Python
python文件读写代码实例
2019/10/21 Python
Python函数基本使用原理详解
2020/03/19 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
python zip()函数的使用示例
2020/09/23 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
社会实践自我鉴定
2013/11/07 职场文书
买房子个人收入证明
2014/01/16 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
校庆接待方案
2014/03/18 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
起诉书格式范文
2015/05/20 职场文书
结婚司仪主持词
2015/06/29 职场文书