el-table中怎样在已选中的行中触发取消选择的事件？

Question

当多选框选中时对应的姓名以标签的形式出现在下面已选人员中（已实现），
怎样在取消表格选中状态的时候同时关闭标签

当取消选择时，标签依然存在

//标签数组
const dynamicTags: any = ref([])
//关闭标签
const handleClose = (tag: string) => {
    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
    // console.log(tag);
    const rows: any[] = tableRef.value?.getSelectionRows()
    for (let i of rows) {
        if (tag == i.nickName) {
            tableRef.value?.toggleRowSelection(i, false)
        }
    }
}

const tableRef = ref<InstanceType<typeof ElTable>>()
//获取选中的行
const change = () => {
    const rows: any[] = tableRef.value?.getSelectionRows()
    for (let item of rows) {
        dynamicTags.value.push(item.nickName)
    }
}

现在是不知道怎么在已选择的行中获取到我操作的那行，根据我所操作的行来筛选数组删除对应元素。有什么思路吗？

Answer 1

你可以单独操作一项，也可以整体操作所有项，不过都是需要监听selection-change事件

单独操作一项就是根据当前选中行是否选中，然后操作dynamicTags，选中就是push，取消选中就选获取当前行在dynamicTags中的索引，然后splice删除

整体操作就像你代码写的，getSelectionRows获取所有选中行，把结果整体赋值给dynamicTags，你的问题在于push前没有清空dynamicTags，或者直接使用dynamicTags.value = rows.map(item => item.nickName)