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 相关文章推荐
angularJS提交表单(form)
Feb 09 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 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
YII中assets的使用示例
2014/07/31 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
Python变量赋值的秘密分享
2018/04/03 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python的常用模块之collections模块详解
2018/12/06 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
Python中的socket网络模块介绍
2022/07/23 Python