【Vue】多选框保留勾选数据

Love The Way You Lie 2024-03-25 21:02 74阅读 0赞

> **目录**
> 
> 一、前言
> 
> 二、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(){
>             //方法1
>             this.$refs["table"].clearSelection();
>             //方法2
>             this.$refs.buyerTable.clearSelection();
>          },
>     
>     },
> 
> ### 三、清除某些选中项 ###
> 
>     for (let i = 0; i < this.selections.length; i++) {
>               if (true) {
>                 this.$refs.table.toggleRowSelection(this.selections[i]);
>                 i--;
>               }
>             }
> 
> ### 四、细节 ###
> 
>  *  清除某行数据时, 集合的长度会实时变化, 如果按照原有索引去删除就会少删.
>  *  所以, 正序删的时候, 每删除一个就要索引-1
>  *  反序删直接删就行
> 
> **有用请点赞，养成良好习惯！**
> 
> **疑问、交流、鼓励请留言！**