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 相关文章推荐
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
php表单处理操作
2017/11/16 PHP
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
Python探索之SocketServer详解
2017/10/28 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
python3.5安装python3-tk详解
2019/04/26 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
销售简历自我评价
2014/01/24 职场文书
大学生军训广播稿
2014/01/24 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
vue 实现上传组件
2021/05/31 Vue.js
实操Python爬取觅知网素材图片示例
2021/11/27 Python