VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)


Posted in Javascript onApril 03, 2020

一、问题

用elementUi横着增加一行数据没毛病,可以操作
添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效
点击下一行时 值就变过来

VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)

二、原因

横向添加 是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题

而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数值已经绑定上去了的后果,即:

v-model绑定数据不实时更新

三、解决

使用 vm.$set 实例方法

// eg:this.$set(this.someObject,'b',2)

VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)

ps:vue-table 添加动态锁定和解锁列功能 很强大

为什么要写下这篇文章,因为我在网上找不到,关于vue-table 添加动态锁定和解锁列功能 的介绍
自己就尝试着研究了下 。

我们都知道 锁定列 只要跟 <vxe-table-column type="seq" width="60" align="center" fixed="left"/>
一样 ,添加 fixed=“left” 或者 fixed=“right” 就可以向左或向右 锁定, 但这毕竟 不能动态锁定 。
首先我要的效果是 :

这是站在官方文档实现 复杂excel 筛选功能的基础上进行的

VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)

废话不多说,直接击要害。

FilterExcel.vue 里边

在相应的位置 添加代码 :

<li class="me-menu" @click="onLock('left')"> <span>左锁定此列</span> </li> <li class="me-menu" @click="onLock('right')"> <span>右锁定此列</span> </li> <li class="me-menu" @click="offLock"> <span>解除锁定</span> </li>

然后就是在方法区添加方法:offLock() { const { $panel, $table, $columnIndex } = this.params $table.closeFilter() $panel.$options.parent.tableColumn[$columnIndex].fixed = undefined $table.refreshColumn() }, onLock(val) { const { $panel, $table, $columnIndex } = this.params $table.closeFilter() $panel.$options.parent.tableColumn[$columnIndex].fixed = '' + val + '' $table.refreshColumn() },

到此 功能实现。

页面组件引用 :FilterExcel.vue 实际开发中都是封装成组件 方便使用

<vxe-table-column
  field="platform"
  title="平台"
  width="100px"
  align="center"
  sortable
  :filters="[{data: {vals: [], sVal: '', fMenu: '', f1Type:'', f1Val: '', fMode: 'and', f2Type: '', f2Val: ''}}]"
  :filter-render="{name: 'FilterExcel'}"
  />

总结

到此这篇关于VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)的文章就介绍到这了,更多相关vue table 动态添加数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一个简单的js树形菜单
Dec 09 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
mpvue实现微信小程序快递单号查询代码
Apr 03 #Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 #Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 #Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 #Javascript
JS内置对象和Math对象知识点详解
Apr 03 #Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 #Javascript
JavaScript鼠标拖拽事件详解
Apr 03 #Javascript
You might like
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
php生成无限栏目树
2017/03/16 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
员工薪酬福利制度
2014/01/17 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
追讨欠款律师函
2015/06/24 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python