VUE+Element UI实现简单的表格行内编辑效果的示例的代码


Posted in Javascript onOctober 31, 2018

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

效果示例地址

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="external nofollow" >
  <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实现简单的表格行内编辑效果的示例的代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
详解JavaScript自定义函数
Jul 29 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
微信小程序实现签到功能
Oct 31 #Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 #Javascript
微信小程序实现自动定位功能
Oct 31 #Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 #Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 #jQuery
vue+iview 实现可编辑表格的示例代码
Oct 31 #Javascript
详解vue 项目白屏解决方案
Oct 31 #Javascript
You might like
PHP实现防盗链的方法分析
2017/07/25 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
jquery中change()用法实例分析
2015/02/06 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python对excel文档去重及求和的实例
2018/04/18 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
基于python3生成标签云代码解析
2020/02/18 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
专科生就业求职信
2014/06/22 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
如何用python清洗文件中的数据
2021/06/18 Python