对Vue table 动态表格td可编辑的方法详解


Posted in Javascript onAugust 28, 2018

项目中需求用到可编辑表格

下图这种 ↓

对Vue table 动态表格td可编辑的方法详解

对Vue table 动态表格td可编辑的方法详解

element UI 组件table表格中 增加template 模版

翻入input

根据业务逻辑增加全局变量 isEdit 是否变化。

<el-table-column
 label="名称"
 width="140">
 <template scope="scope">
  <el-input v-if="scope.row.isEdit && scope.row.status === 0" v-model="scope.row.name" ></el-input>
  <label v-if="scope.row.status === 1" class="indisable">{{scope.row.name +'(已禁用)' || '--'}}</label>
  <label v-if="!scope.row.isEdit && scope.row.status === 0">{{scope.row.name || '--'}}</label>
  </template>
</el-table-column>

编辑函数 :@lick="edit"

edit (val) {
  this.initUpdateVal = val.name
  val.isEdit = true
  },

以上这篇对Vue table 动态表格td可编辑的方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
js+css在交互上的应用
Jul 18 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
javascript中的delete使用详解
Apr 11 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 #Javascript
layui实现文件或图片上传记录
Aug 28 #Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 #Javascript
react native 获取地理位置的方法示例
Aug 28 #Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 #Javascript
JavaScript模拟实现自由落体效果
Aug 28 #Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 #Javascript
You might like
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JavaScript File API文件上传预览
2016/02/02 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
python检测某个变量是否有定义的方法
2015/05/20 Python
Python利用ansible分发处理任务
2015/08/04 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
请介绍一下Ant
2016/07/22 面试题
2014红色之旅心得体会
2014/10/07 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers