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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <!-- 引入样式 -->

     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

     <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实现简单的表格行内编辑效果的更多相关文章

  1. datatables表格行内编辑的实现

    Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...

  2. vxe-table 可编辑表格 行内编辑以及验证 element-UI集成

    <vxe-table border show-overflow ref="xTable"  ----------------------------------------- ...

  3. bootstrap-editable实现bootstrap-table行内编辑

    bootstrap-editable行内编辑效果如下: 需要引入插件 列初始化代码,为可编辑的列添加editable属性: columns = [ { title: '文件名', field: 'Na ...

  4. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  5. vue + element ui 表格自定义表头，提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  6. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  7. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  8. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  9. vue+element ui项目总结点（一）select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

随机推荐

  1. 关于layer的基本所有的事件全部失效问题

    只要在页面中,要是存在id="undefined", layer的基本所有的事件全部失效. <input type="radio" id="un ...

  2. PHP自动发红包代码示例

    <?php header('Content-type:text'); define("TOKEN", "weixin"); $wechatObj = ne ...

  3. shell脚本编程基础--文本比较

    1.概述 允许测试Linux文件系统上文件的目录和状态. 2.详解 2.1 检查目录 -d测试会检查指定的目录是否存在于系统中.当我们打算将文件写入目录或是准备切换到该目录时,先进行测试是比较好的做法 ...

  4. ubuntu 下 shell 搜索命令

    一.在当前目录及其子目录查找以mesos开头,并以.jar结尾的文件,并打印出来 sudo find ./ -name mesos*.jar -print 二.whereis, locate 也有类似 ...

  5. react-native Android release打包失败

    npm run build报错(android) react-native 0.5x在安卓环境 gradle 3.x版本下编译release版本的时候提示编译失败,但是debug模式下是没有问题的. ...

  6. 关于C 语言的字符串常量拼接

    问题记录: C语言中,字符串是否可以通过连续的常量创建直接编辑拼接在一起? 比如下述语句赋值: const char *path = “this is string one”   “this is s ...

  7. 【算法】331- JS洗牌算法

    点击上方"前端自习课"关注,学习起来~ 最近的一个塔罗牌项目中,有一个洗牌的需求,其实也就是随机打乱数组,遂网上搜了下,再此做个整理- 塔罗牌 举例来说,我们有一个如下图所示的数组 ...

  8. Java并发编程杂记（1）

    高并发: cpu -- 缓存 -- 内存 资源利用率 公平性 便利性   生活举例 --- 串行任务中的异步性:我在烧水的时候看书 --- 平衡点   安全性问题 --- 产生竞态条件 共享数据 -- ...

  9. 表删除时 Cannot delete or update a parent row: a foreign key constraint fails 异常处理

    有两张表,结构如下: t_item:                          t_bid: id        int                     id        int n ...

  10. poj 2631 Roads in the North （自由树的直径）

    Roads in the North Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4513   Accepted: 215 ...