Vue多选框保留勾选数据

一、前言

二、reserve-selection

三、清除某些选中项

四、细节

一、前言

第一阶段:一开始是定义了两个集合用来保存:data的数据, 集合数据动态切换变化的时候直接获取最新的, 但是缺点是不能保存勾选状态.
第二阶段:发现只能操作原:data的数据, 所谓的checked再往回赋值根本没用. 缺点是数据操作和列表数据模糊查询不能实现.
第三阶段:发现了reserve-selection这个东东, 近乎完美解决问题
总结:遇到问题先别急着造轮子, 大概率有对应的功能标签了, 一般的业务根本触及不到vue的设计缺陷的...

二、reserve-selection

        <el-table ref="table" :row-key="rowKey" :data="tableData" @selection-change="selectionChange"max-height="666px"><el-table-column type="selection" label="全部" width="55" align="center" :reserve-selection="true" /><el-table-column label="姓名" align="left" prop="name" /><el-table-column label="手机号" align="left" prop="phone"/></el-table>

 methods: {   rowKey(row) {//row-key就是要指定一个key标识这一行的数据,保证唯一即可return row.id;},// 列表选择,val选中的表格行数据selectionChange(val) {console.log(val)},//清除表格所有的选中项clearSelect(){//方法1this.$refs["table"].clearSelection();//方法2this.$refs.buyerTable.clearSelection();},},

三、清除某些选中项

        for (let i = 0; i < this.selections.length; i++) {if (true) {this.$refs.table.toggleRowSelection(this.selections[i]);i--;}}

四、细节

清除某行数据时, 集合的长度会实时变化, 如果按照原有索引去删除就会少删.
所以, 正序删的时候, 每删除一个就要索引-1
反序删直接删就行

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！

Vue多选框保留勾选数据相关推荐

vue设置多选框默认勾选_Angular/Vue多复选框勾选问题
此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...
vue设置多选框默认勾选_Vue实现全选和反选即Vue复选框增加全选功能
导语:Vue中单选下拉框开发起来非常简单,直接select包裹一个带v-for的option即可但是当我们想做个带多选的下拉框该怎么办呢?最简方法是什么?比如下面这个图: 如果网上搜的话,搜的是一堆 ...
Java 根据模板导出Excel时，如何根据后台数据设置复选框的勾选
我之前遇到这个问题,上网查找解决方案.都说要在Excel中设置复选框的链接单元格,然后通过赋值给单元格控制复选框的勾选. 在我设置好链接单元格之后,点击复选框,单元格中的值会改变 TRUE 或 FAL ...
el-table复选框全部勾选以及勾选回显
el-table复选框全部勾选以及勾选回显前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存 ...
excel导出时如何根据java后台返回的结果动态实现excel复选框的勾选
现在有一个excel的模板,供导出的时候使用(如下图),我们要根据java后台出从数据库取出的数据动态实现P单元格中复选框的勾选, 如果返回的结果是在职,那么在职复选框就被勾选,以此类推. 问题是我们 ...
vue设置多选框默认勾选_vue中复选框怎么默认全选，至少选择4个才可以点击下一步...
[1]项目中有这样的需求,要怎么解决呢...默认复选框是全选状态,也可以取消某一个状态,至少选择4个选项才可以点击下一步.这个要怎么实现啊 html: 原料进厂模块组装成品质检仓储物流销售 ...
PyQt5 复选框（勾选框）
-- coding: utf-8 -- import sys from PyQt5.QtWidgets import QApplication, QWidget, QCheckBox from PyQ ...
复选框JCheckBox勾选改变内容
勾选前勾选后取消勾选–恢复原状贴代码 JCheckBox chckbxNewCheckBox = new JCheckBox("勾选事件");chckbxNewCheckBo ...
html 勾选框整体勾选,html勾选框_html5实现表单的复选框验证
摘要腾兴网为您分享:html5实现表单的复选框验证,中日翻译,携程,悟空识字,天气预报等软件知识,以及寻仙答题器,山东省民生警务平台,买车168,关键词优化精灵,文件拷贝工具,自动壁纸,语音播报软件 ...

Vue多选框保留勾选数据

一、前言

二、reserve-selection

三、清除某些选中项

四、细节

Vue多选框保留勾选数据相关推荐

最新文章

热门文章