对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 操作cookies及正确使用cookies的属性
Oct 15 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
微信小程序自定义组件封装及父子间组件传值的方法
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
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP getName()函数讲解
2019/02/03 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
JavaScript原生数组Array常用方法
2017/04/06 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python写日志文件操作类与应用示例
2019/07/01 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
用python读取xlsx文件
2020/12/17 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
广告语设计及教案
2014/03/21 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
采购部年度工作总结
2015/08/13 职场文书
JavaScript ES6的函数拓展
2022/01/18 Javascript