element-ui 表格实现单元格可编辑的示例


Posted in Javascript onFebruary 26, 2018

如下所示:

<template>
 <el-table
 :data="tableData"
 border
 @cell-mouse-enter="handleMouseEnter"
 @cell-mouse-leave="handleMouseOut"
 style="width: 100%">
 <el-table-column
  label="日期"
  width="180">
  <template scope="scope">
  <span v-if="!scope.row.editFlag">{{ scope.row.name }}</span>
  <span v-if="scope.row.editFlag" class="cell-edit-input"><el-input v-model="inputColumn1" placeholder="请输入内容"></el-input></span>
  <span v-if="!scope.row.editFlag" style="margin-left:10px;" class="cell-icon" @click="handleEdit(scope.row)"> <i class="el-icon-edit"></i> </span>
  <span v-if="scope.row.editFlag" style="margin-left:10px;" class="cell-icon" @click="handleSave(scope.row)"> <i class="el-icon-document"></i> </span>
  </template>
 </el-table-column>
 </el-table>
</template>
<script>
export default{

 data(){
 return {
  tableData:[
  {
   name:"test",
   editeFlage:false
  },
  {
   name:"test",
   editeFlage:false
  },
  {
   name:"test",
   editeFlage:false
  },
  {
   name:"test",
   editeFlage:false
  },
  ],
  inputColumn1:""//第一列的输入框
 }
 },
 methods:{
 handleEdit:function(row){
  //遍历数组改变editeFlag
 },
 handleSave:function(row){
  //保存数据,向后台取数据
 },
 handleMouseEnter:function(row, column, cell, event){
  cell.children[0].children[1].style.color="black";
 },
 handleMouseOut:function(row, column, cell, event){
  cell.children[0].children[1].style.color="#ffffff";
 }
 }
}
</script>
<style>
.cell-edit-input .el-input, .el-input__inner {
 width:100px;
}
.cell-icon{
 cursor:pointer;
 color:#fff;
}
</style>

以上这篇element-ui 表格实现单元格可编辑的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 #Javascript
Vue 中的compile操作方法
Feb 26 #Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 #Javascript
vue中简单弹框dialog的实现方法
Feb 26 #Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 #Javascript
vue实现模态框的通用写法推荐
Feb 26 #Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 #Javascript
You might like
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
jquery JSON的解析方式
2009/07/25 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
three.js 入门案例详解
2018/01/23 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
物流专业大学生的自我鉴定
2013/11/13 职场文书
应届毕业生个人自荐信范文
2013/11/30 职场文书
模具数控专业自荐信
2014/01/27 职场文书
一名老师的自我评价
2014/02/07 职场文书
四群教育工作实施方案
2014/03/26 职场文书
房屋出租协议书
2014/04/10 职场文书
农业开发项目建议书
2014/05/16 职场文书
初一新生军训方案
2014/05/22 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
2015年妇女工作总结
2015/05/14 职场文书
保险公司增员口号
2015/12/25 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫