对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 相关文章推荐
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
微信小程序实现点击效果
Jun 21 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 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
php skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
js实现轮播图特效
2020/05/28 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
简明 Python 基础学习教程
2007/02/08 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
python 判断网络连通的实现方法
2018/04/22 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
浅析python中while循环和for循环
2019/11/19 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
房地产项目建议书
2014/03/12 职场文书
外贸英文求职信范文
2015/03/19 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
nginx rewrite功能使用场景分析
2022/05/30 Servers
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript