原理是通过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. python基本文件操作

    python文件操作 python的文件操作相对于java复杂的IO流简单了好多,只要关心文件的读和写就行了 基本的文件操作 要注意的是,当不存在某路径的文件时,w,a模式会自动新建此文件夹,当读模式 ...

  2. Linux 使用 docker 下搭建xunsearch 搜索引擎服务

    Linux 使用 docker 下搭建 xunsearch 搜索引擎服务 安装 docker 环境(菜鸟教程有说明) 安装docker说明 下载并运行 xunsearch 的服务端:docker安装x ...

  3. Hudi基本概念

    Apache Hudi(发音为"Hoodie")在DFS的数据集上提供以下流原语 插入更新 (如何改变数据集?) 增量拉取 (如何获取变更的数据?) 在本节中,我们将讨论重要的概念 ...

  4. luogu P3183 [HAOI2016]食物链 |记忆化搜索

    如图所示为某生态系统的食物网示意图,据图回答第1小题现在给你n个物种和m条能量流动关系,求其中的食物链条数.物种的名称为从1到n编号M条能量流动关系形如a1 b1a2 b2a3 b3......am- ...

  5. oracle逻辑存储结构

    oracle数据库管理系统有三个重要的概念:实例.数据库.数据库服务器.oracle数据库的存储结构可以分为逻辑存储结构和物理存储结构.逻辑存储结构用于描绘Oracle内部组织和管理数据的方式,而物理 ...

  6. iOS 日志获取和实时浏览器显示日志

    https://juejin.im/entry/576252855bbb500063e51c7d iOS 日志获取和实时浏览器显示日志

  7. 使用 Ocelot 匹配路由的方法匹配路由

    使用 Ocelot 匹配路由的方法匹配路由 Intro 之前我们在 Ocelot 网关的基础上自定义了一个认证授权的 Ocelot 中间件,根据请求的路径和 Method 进行匹配,找到对应的权限配置 ...

  8. 常见的linux快捷方式和英文错误提示

    第5章 linux常见的快捷方式 Ctrl +l 清屏的意思 2 Ctrl +c 退出当前的进程 3 Ctrl +w 删除光标到空格之间的信息 4 Ctrl +a 快速移动到光标行首 5 Ctrl + ...

  9. 大数据学习笔记——Hive完整部署流程

    Hive详细部署教程 此篇博客承接上篇Hadoop和Zookeeper的部署教程,将会详细地对HIve的部署做一个整理,Hive相当于是封装在HDFS和Mapreduce上的一套sql引擎,只需要安装 ...

  10. drf源码分析系列---版本控制

    版本的使用 第一步:写路由url(r'^api/(P<version>\w+)/user/$',views.UserView.as_view()), 第二步:写模块导入from rest_ ...