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 相关文章推荐
JS中showModalDialog 的使用解析
Apr 17 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
Javascript基础之数组的使用
May 13 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
整理一下常见的IE错误
Nov 18 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
js实现简单页面全屏
Sep 17 Javascript
vue实现在线翻译功能
Sep 27 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
vuex实现购物车的增加减少移除
Jun 28 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实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
python网络编程学习笔记(四):域名系统
2014/06/09 Python
python在windows下实现备份程序实例
2014/07/04 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
Python 在函数上添加包装器
2020/07/28 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
悬挂训练绳:TRX
2017/12/14 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
经贸日语毕业生自荐信
2013/11/03 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
PHP基本语法
2021/03/31 PHP
Python数据分析入门之数据读取与存储
2021/05/13 Python