最近做项目中遇到，选中右侧列表中一条数据，在左侧展示; 删除左侧的数据后，右侧表格中的数据取消选中；取消右侧列表的选中状态，左侧数据同时删除，如下图：

项目使用的是 vue3 + elementPlus
使用到了elementplus的Drawer组件和table组件。
具体代码如下：

<template>
  <div class="greetings">
    <el-button type="primary" @click="drawer = true">Primary</el-button>

    <!-- 左侧数据展示 -->
    <ul>
      <li
        v-for="(item, index) in defaultData.listData"
        :key="item.id"
      >
      {{item.name}}
      <el-icon @click="delList(index)"><Close /></el-icon>
      </li>
    </ul>
    <!-- 右侧抽屉 -->
    <el-drawer v-model="drawer" title="I am the title">
      <el-table
        ref="multipleTableRef"
        :data="defaultData.tableData"
        style="width: 100%"
        :show-header="false"
        :row-key="getRowKey"
        @select="handleSelect"
        @row-click="handleRowclick"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="name" label="Name" width="120" />
      </el-table>
    </el-drawer>
  </div>
</template>

<script setup>
  import { reactive, ref } from 'vue'
  import {
    Close
  } from '@element-plus/icons-vue'
  const multipleTableRef = ref()
  const drawer = ref(false)
  const defaultData = reactive({
    tableData: [
      {
        id: '01',
        name: '测试001'
      },
      {
        id: '02',
        name: '测试002'
      },
      {
        id: '03',
        name: '测试003'
      },
      {
        id: '04',
        name: '测试004'
      }
    ],
    listData: []
  })
  function getRowKey (row) {
    return row.id
  }
  // 选中数据在左侧列表展示
  function handleSelect (val) {
    console.log(val)
    defaultData.listData = val
  }
  // 点击某行控制复选框选中与否
  function handleRowclick (row) {
    console.log(row)
    const selected = defaultData.listData.some(item => item.id === row.id)
    if (!selected) {
      defaultData.listData.push(row)
      multipleTableRef.value.toggleRowSelection(row)
    } else {
      const finArr = defaultData.listData.filter(item => {
        return item.id !== row.id
      })
      defaultData.listData = finArr
      multipleTableRef.value.toggleRowSelection(row, false)
    }
  }
  // 删除左侧列表数据，右侧表格数据置为未选中状态
  function delList (index) {
    let a = []
    a.push(defaultData.listData[index])
    defaultData.listData.splice(index, 1)
    defaultData.tableData.forEach(item => {
      a.forEach(subItem => {
        if(item.id === subItem.id){
          multipleTableRef.value.toggleRowSelection(item, false)
          a = []
        }
      })
    })
  }
</script>
<style scoped>
 .el-icon {
  vertical-align: middle;
 }
</style>