vue3 elementui 表格组件,过滤多选回显问题?

各位老师好, 我遇到的问题描述一下:

1 在表格组件上添加搜索
2 过滤表格组件后,选择表格内容保存后之前表格所选的内容丢失
3 清除过滤字符后,表格不能回显过滤之前已经选择的条目,

下面我的组件里面的代码,请老师们指导,感谢感谢:

<template>
    <el-input v-model="searchRole" placeholder="输入角色名搜索" clearable />
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="roleName" label="名称" />
        <el-table-column prop="sourceName" label="来源" />
    </el-table>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch, computed } from 'vue'
import { ElTable } from 'element-plus'
import { cloneDeep } from 'lodash'
import { fetchRoleList } from '@/apis/account/role'
import { fetchAccountRoles, updateAccountRoles } from '@/apis/account/account'
const props = defineProps({
    accountId: String
const searchRole = ref('')
const tableData = computed(() => {
    if (roleList.value.length) {
        return roleList.value.filter(data => !searchRole.value || data.roleName.toLowerCase().includes(searchRole.value.toLowerCase()))
    return []
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref([])
const handleSelectionChange = val => {
    multipleSelection.value = val
    console.log("multipleSelection.value",multipleSelection.value)
const remDuplicateObj = arr => {
    let newArr = []
    let obj = {}
    for (let i = 0; i < arr.length; i++) {
        if (!obj[arr[i].id]) {
            newArr.push(arr[i])
            obj[arr[i].id] = true
    return newArr
const roleList = ref([])
async function getRoles() {
    const res = await fetchRoleList(null)
    if (!res) return
    roleList.value = res.content
    getAccountRoles()
const accountRoles = ref([])
async function getAccountRoles() {
    const res = await fetchAccountRoles(props.accountId)
    if (!res) return
    accountRoles.value = cloneDeep(res.content)
    toggleSelection(res.content)
const toggleSelection = rows => {
    if (!rows) return
    // if (!multipleSelection.value) return
    const roleNames = rows.map(val => val.roleName)
    // const roleNames = multipleSelection.value.map(val => val.roleName)
    if (roleNames) {
        roleList.value.forEach(row => {
            if (roleNames.includes(row.roleName)) {
                // TODO: improvement typing when refactor table
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                multipleTableRef.value!.toggleRowSelection(row, true)
    } else {
        multipleTableRef.value!.clearSelection()
const submitRoles = async () => {
    return new Promise<void>(async (resolve, reject) => {
        try {
            const data = {
                roles: multipleSelection.value.map(val => val.roleName)
            await updateAccountRoles(props.accountId, data)
            emit('changed', false)
            getAccountRoles()
            resolve()
        } catch (error) {
            reject()
const emit = defineEmits(['changed'])
watch(
    [() => multipleSelection.value],
    () => {
        const newRoles = multipleSelection.value.map(v => v.roleName)
        const oldRoles = accountRoles.value.map(v => v.roleName)
        const hasChanged = JSON.stringify(newRoles) !== JSON.stringify(oldRoles)
        emit('changed', hasChanged)
        deep: true
onMounted(() => {
    getRoles()
defineExpose({
    submitRoles
</script>