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 相关文章推荐
javascript 树控件 比较好用
Jun 11 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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中的MVC模式运用技巧
2007/05/03 PHP
php str_pad 函数使用详解
2009/01/13 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[56:20]LGD vs VP Supermajor 败者组决赛 BO3 第三场 6.10
2018/07/04 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
基于python中theano库的线性回归
2018/08/31 Python
Python3中exp()函数用法分析
2019/02/19 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
十八大闭幕感言
2014/01/22 职场文书
董事长助理岗位职责
2015/02/11 职场文书
电影圆明园观后感
2015/06/03 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Python requests用法和django后台处理详解
2022/03/19 Python