原理是通过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. C语言博客作业08

    C语言I博客作业08](https://www.cnblogs.com/490-85-00-58-/p/11863312.html) 问题 回答 这个作业属于那个课程 C语言程序设计II 这个作业要求 ...

  2. 【10分钟学Spring】：@Profile、@Conditional实现条件化装配

    根据不同的环境来装配不同的bean 企业级开发中,我们一般有多种环境,比如开发环境.测试环境.UAT环境和生产环境.而系统中有些配置是和环境强相关的,比如数据库相关的配置,与其他外部系统的集成等. 如 ...

  3. 目标检测 1 ： 目标检测中的Anchor详解

    咸鱼了半年,年底了,把这半年做的关于目标的检测的内容总结下. 本文主要有两部分: 目标检测中的边框表示 Anchor相关的问题,R-CNN,SSD,YOLO 中的anchor 目标检测中的边框表示 目 ...

  4. Python批量检测服务器端口可用性与Socket函数使用

    socket函数 简述 socket又称套间字或者插口,是网络通信中必不可少的工具.有道是:"无socket,不网络".由于socket最早在BSD Unix上使用,而Unix/L ...

  5. Xcode 10 Error: Multiple commands produce

    目录 Xcode 9.4.1运行react-native 可以,但是在Xcode 10运行报错,报错信息如下: 解决方法 1. 选择 File > Project Settings (或者 Fi ...

  6. python笔记02

    day02笔记记录 一.今日摘要 循环.字符串格式化.运算符.编码.博客. 二.内容回顾 (一)计算机基础 计算机由硬件和软件组成.传统计算机的硬件一般有输入单元.输出单元,算数逻辑单元.控制单元及记 ...

  7. Ubuntu 18.04 环境下 kubernetes v1.16.2 单机部署说明

    一.安装环境 本次部署使用阿里云ECS 操作系统: Ubuntu  18.04 64位 实例规格: ecs.c6.large 2U4G 二.kubernetes 版本 k8s.gcr.io/kube- ...

  8. [TimLinux] asciinema Linux终端录制工具嵌入私有web中

    yum install asciinema https://github.com/asciinema/asciinema-player # 下载asciinema-player.css, asciin ...

  9. 第5节：Java基础 - 必知必会（下）

    第5节:Java基础 - 必知必会(下) 本小节是Java基础篇章的第三小节,主要讲述Java中的Exception与Error,JIT编译器以及值传递与引用传递的知识点. 一.Java中的Excep ...

  10. 2017 CCPC秦皇岛 A题 A Ballon Robot

    The 2017 China Collegiate Programming Contest Qinhuangdao Site is coming! There will be  teams parti ...