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 使用点滴函数代码
May 20 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
js实现登录与注册界面
Nov 01 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 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中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
PHP运行模式汇总
2016/11/06 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
PHP var关键字相关原理及使用实例解析
2020/07/11 PHP
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
JS判断数组那点事
2017/10/10 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python退出命令是什么?详解python退出方法
2018/12/10 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python JSON编解码方式原理详解
2020/01/20 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
什么是TCP/IP
2014/07/27 面试题
安全检查与奖惩制度
2014/01/23 职场文书
家长对孩子的感言
2014/03/10 职场文书
学校花圃的标语
2014/06/18 职场文书
岗位安全生产责任书
2014/07/28 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
情况说明书格式及范文
2019/06/24 职场文书