原理是通过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. react中将svg做成icon组件在其他模块调用

    开发前端页面,经常会有很多共用的图标icon,那么我们把它单独做成组件,以便后期重复调用! 首先在components 的icons文件夹下创建BaseIcon.js文件. 我们需要先在命令行安装gl ...

  2. .NET进阶篇06-async异步、thread多线程4

    知识需要不断积累.总结和沉淀,思考和写作是成长的催化剂 梯子 一.锁1.lock2.Interlocked3.Monitor4.SpinLock5.Mutex6.Semaphore7.Events1. ...

  3. 前端常用得CSS代码分享

    前端常用得CSS代码分享 本文首发于公众号:小夭同学,同步更新个人博客:故事影片,转载请署名.代码不断更新中!! 1,垂直居中对齐 .vc { position: absolute; top: 50% ...

  4. 在 Xcode9 中自定义文件头部注释和其他文本宏

    在 Xcode9 中自定义文件头部注释和其他文本宏 . 参考链接 注意生成的plist文件的名称为IDETemplateMacros.plist 在plist文件里设置自己想要的模板 注意plist存 ...

  5. 工具类中注入service和dao

    今天编写了个工具类需要用到service成和dao层的代码 如下: //第一步:需要将工具类注入到容器中 @Component public class RuleUtils { ​ //第二部注入 @ ...

  6. 修改IE默认页的指向

    方法一: 1.打开IE浏览器 → 单击 工具 → Internet选项 2.填上你要设置的主页网址 3.重启IE浏览器,成功设置主页 方法二: 1.按住键盘"win+r" → 输入 ...

  7. Cloudflare Workers 部署跨域代理服务

    项目源码:https://github.com/netnr/workers 发布链接:https://cors.zme.ink 使用文档:https://developers.cloudflare.c ...

  8. exports、module.exports 和 export、export default

    先了解他们的使用范围. require: node 和 es6 都支持的引入export / import : 只有es6 支持的导出引入module.exports / exports: 只有 no ...

  9. eclipse Outline里图标的含义

    source: http://www.cnblogs.com/qdwyg2013/p/6489019.html 先说颜色: 绿色:public 黄色:protected 蓝色:no modifier ...

  10. 在 ASP.NET Core 中使用 AutoMapper 使 Entity 和 Resource 之间进行映射

    目录 从 NuGet 安装 AutoMapper 添加 Entity类 和 Resource类 添加一个 Profile文件,配置映射关系 在Startup中对AutoMapper进行注册 在项目中使 ...