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 相关文章推荐
来自qq的javascript面试题
Jul 24 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
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
一个域名查询的程序
2006/10/09 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
Dom 结点创建 基础知识
2011/10/01 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python实现websocket的客户端压力测试
2019/06/25 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Pytorch中.new()的作用详解
2020/02/18 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
简述安装Slackware Linux系统的过程
2012/05/08 面试题
社团活动总结模板
2014/06/30 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
文明礼仪倡议书
2015/04/28 职场文书
小王子读书笔记
2015/06/29 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
SpringBoot集成Redis的思路详解
2021/10/16 Redis
SQL Server中使用表变量和临时表
2022/05/20 SQL Server
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python