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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
js继承 Base类的源码解析
Dec 30 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
JQuery中的ready函数冲突的解决方法
May 17 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
Vue 请求传公共参数的操作
Jul 31 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中实现简单的ACL 完结篇
2011/09/07 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
有关DOM元素与事件的3个谜题
2010/11/11 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python3 处理JSON的实例详解
2017/10/29 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python实现把类当做字典来访问
2019/12/16 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
python 日志 logging模块详细解析
2020/03/31 Python
python代码实现图书管理系统
2020/11/30 Python
美国在线工具商店:Acme Tools
2018/06/26 全球购物
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
中软国际Java程序员笔试题
2014/07/19 面试题
平面设计岗位职责
2013/12/14 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
初中毕业生自我评价
2015/03/02 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技