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 bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
jquery实现图片预加载
Dec 25 Javascript
js选择器全面解析
Jun 27 Javascript
JS原型链怎么理解
Jun 27 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
JS实现一个简单的日历
Feb 22 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 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
关于文本留言本的分页代码
2006/10/09 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
javascript初学者常用技巧
2014/09/02 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
python if not in 多条件判断代码
2016/09/21 Python
python字典操作实例详解
2017/11/16 Python
python分析作业提交情况
2017/11/22 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
美国时尚在线:Showpo
2017/09/08 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
高二学生评语大全
2014/04/25 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
2015年党建工作总结
2015/03/30 职场文书
新闻报道稿范文
2015/07/23 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
Python超详细分步解析随机漫步
2022/03/17 Python
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL