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 相关文章推荐
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
纯JS实现五子棋游戏
May 28 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 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 采集程序 常用函数
2008/12/18 PHP
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
php中final关键字用法分析
2016/12/07 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
json 定义
2008/06/10 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
微信小程序 Storage API实例详解
2016/10/02 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
js实现无限瀑布流实例方法
2019/09/16 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
Python中作用域的深入讲解
2018/12/10 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
如何保障Web服务器安全
2014/05/05 面试题
国情备忘录观后感
2015/06/04 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
MSSQL基本语法操作
2022/04/11 SQL Server