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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
vue-test-utils初使用详解
May 23 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 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登录功能的实现方法
2014/08/20 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
PHP strripos函数用法总结
2019/02/11 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
js实现常用排序算法
2016/08/09 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
Python在线运行代码助手
2016/07/15 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
职工运动会感言
2014/02/07 职场文书
交通文明倡议书
2014/05/16 职场文书
水知道答案观后感
2015/06/08 职场文书
工作证明书
2015/06/15 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js