vue这种多选框处理（multiselection）

最新推荐文章于 2024-05-11 09:45:30 发布

脚踏实地，日渐富有

最新推荐文章于 2024-05-11 09:45:30 发布

阅读量2.7k

点赞数

文章标签：前端 elementui vue.js javascript html

本文链接：https://blog.csdn.net/weixin_43482333/article/details/125805588

版权

比如一个表单数据，我想根据前面的框框删除多选，删除对应的记录。贴代码

<el-table ref="multipleTable" :data="resourceList" @selection-change="handleSelectionChange" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="60"> </el-table-column>
        <el-table-column prop="resourceName" label="资源名称">
        </el-table-column>
</el-table>

问题描述：这是原本的element UI 提供的一个方法 @selection-change="handleSelectionChange"，但是存在一些问题，比如我后台数据是根据resourceId来唯一确定一个资源的，而这个handleSelectionChange（val）,根据的是索引。但是我不能把这个val传给后台。因此需要进一步处理。

效果图：

因此处理方案如下：

  /* 教师端删除资源*/
async deleteResourceBtn() {
/*teaDeleteResource是项目接口，如果后台只接收单个数值，
可以直接遍历this.deleteSelection，for (let item of val) 
{this.multipleSelection.push(item.resourceId);} */ 

       await this.teaDeleteResource(this.deleteSelection);
       this.deleteResourceDialogVisible = false; 
       this.getResource();  //重新获取资源列表更新表格
},

/* 删除资源弹窗表格 */
/* 这是官方提供的selection函数，只要select的小框框发生变化，
就会触发此函数，里面的val是对应的一条记录的所有信息，为了把
索引换成我所需要的resourceId,我遍历了val,然后把选中的resourseId
加进了一个multipleSelection数组，但是这个数据每次操作完之后，
需要置空，要是直接在最后一行写 this.multipleSelection =“ ”，
那么我另外一个触发删除接口的函数里面就拿不到这个要删除的数组了，
所以我又新设置了一个数组deleteSelection ，用来存储每次需要删除
的rourceId,这个数组提供给上面的删除接口函数用.
*/
handleSelectionChange(val) {
    for (let item of val) {
         this.multipleSelection.push(item.resourceId);
     }
     this.deleteSelection = this.multipleSelection;
     this.multipleSelection = [];
},