怎样根据数组内容同步表格的勾选状态?

怎样根据数组内容同步表格的勾选状态?

点击提交,弹窗关闭,会在父组件的相应对方出现对应标签
(弹窗)

img

(父组件)

img

当再次点击打开弹窗时,已选择的人员在下方存在,但是表中状态没有选中,怎样让标签和表格选中状态同步?

img

我的想法是根据标签筛选表格数据,将对应勾选状态赋上去,但是没实现,不知道哪里出问题了

子组件中

const toggleRowSelection = (row: any,state:any) => {
    return tableRef.value?.toggleRowSelection(row, state)
}

defineExpose({
    centerDialogVisible,
    getSelectionRows,
    toggleRowSelection
})

父组件中

const selectbtn = async () => {
    dialogRef.value!.centerDialogVisible = true
    let { rows: list } = await surplusPeo({ groupId: formData.value.groupId })
    sildeData.value = list
    console.log(sildeData.value, 'sildedata');
    // console.log(dynamicTags1.value,'dynamicTags1');
    for (let item of sildeData.value) {
        for (let i of dynamicTags1.value) {
            if (i == item.nickName) {
                dialogRef.value.toggleRowSelection(item,true)
            }
        }
    }
}

我觉得你的思路没问题。只是视图为什么没有更新,试试这样?加一个 nextTick ??

const selectbtn = async () => {
    dialogRef.value!.centerDialogVisible = true;
    let { rows: list } = await surplusPeo({ groupId: formData.value.groupId })
    sildeData.value = list;
    console.log(sildeData.value, 'sildedata');
    nextTick(()=>{
        // console.log(dynamicTags1.value,'dynamicTags1');
        for (let item of sildeData.value) {
            for (let i of dynamicTags1.value) {
                if (i == item.nickName) {
                    dialogRef.value.toggleRowSelection(item,true)
                }
            }
        }
    })
}