原理是通过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. xmlhttp.readyState的值及解释

    xmlhttp.readyState的值及解释: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()). 2:请求已发送,正在处理中(通常现在可 ...

  2. Win8.1系统蓝屏提示Wpprecorder.sys文件故障解决方法

    从问题查找上来讲Win8.1蓝屏比win7出现田蓝屏更为麻烦,因为没有错误代码,大家也无从查找!所以只有在有限的提示中找到一些“蛛丝马迹”,而今天我们要讲的是“Win8.1重启或快速启动时蓝屏时提示W ...

  3. DBCP2的使用例子和源码详解（不包括JNDI和JTA支持的使用）

    目录 简介 使用例子 需求 工程环境 主要步骤 创建项目 引入依赖 编写jdbc.prperties 获取连接池和获取连接 编写测试类 配置文件详解 数据库连接参数 连接池数据基本参数 连接检查参数 ...

  4. 转战C#_001

    ---------------尽量用最少的语言描述 C# 世界里的所有事物------------------- 1. C#(pronounced "C-sharp") is an ...

  5. js-编程练习题-输出年月日以及练习字符串分割,检索,转换整数(int)

    这是在慕课网上看到的编程题-如有侵权,请联系本人删除. 当然:题是他们的,做题是我的...嘿嘿嘿 某班的成绩出来了,现在老师要把班级的成绩打印出来. 效果图: XXXX年XX月X日 星期X--班级总分 ...

  6. shell 文本单词计数

    words.txt中的内容如下: the day is sunny the the the sunny is is 统计每个单词出现的次数,并降序输出. Unix Pipes脚本如下: cat wor ...

  7. 【原创】004 | 搭上SpringBoot事务诡异事件分析专车

    前言 如果这是你第二次看到师长,说明你在觊觎我的美色! 点赞+关注再看,养成习惯 没别的意思,就是需要你的窥屏^_^ 本专车系列文章 目前连载到第四篇,本专题是深入讲解Springboot源码,毕竟是 ...

  8. syslog日志

    Syslog协议 系统日志(Syslog)协议是在一个IP网络中转发系统日志信息的标准,它是在美国加州大学伯克利软件分布研究中心(BSD)的TCP/IP系统实施中开发的,目前已成为工业标准协议,可用它 ...

  9. Vue.js命名风格指南

    前言 本命名风格指南推荐了一种统一的命名规范来编写 Vue.js 代码.这使得代码具有如下的特性: 统一团队的命名规范,其它开发者或是团队成员更容易上手阅读和理解. IDEs 更容易理解代码,从而提供 ...

  10. iOS FMDatabase 本地数据库的创建和几个基本使用方法

    转自:http://blog.it985.com/3677.html 使用数据库之前当然要先在网上下载FMDB的库,然后添加到自己的工程里面去.没有的请点击下面的来下载 fmdb 在FrameWork ...