vue3使用element plus中的表格完成一个穿梭框，要求数据可以左右切换，并带有搜索功能，数据左右切换后不影响搜索功能提供完整代码

以下是一个使用Element Plus表格实现穿梭框的示例代码，包括数据的左右切换和搜索功能：

<template>
  <div>
    <el-row>
      <el-col :span="11">
        <el-input v-model="leftSearch" placeholder="请输入左侧搜索关键字" @input="handleLeftSearch"></el-input>
        <el-table :data="leftData" :height="tableHeight" style="width: 100%" @row-click="handleLeftRowClick">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="2" style="text-align: center">
        <el-button type="primary" @click="handleRightTransfer">添加</el-button>
        <el-button type="primary" @click="handleLeftTransfer">移除</el-button>
      </el-col>
      <el-col :span="11">
        <el-input v-model="rightSearch" placeholder="请输入右侧搜索关键字" @input="handleRightSearch"></el-input>
        <el-table :data="rightData" :height="tableHeight" style="width: 100%" @row-click="handleRightRowClick">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import { ElTable, ElTableColumn, ElInput, ElButton, ElRow, ElCol } from 'element-plus';

export default {
  components: { ElTable, ElTableColumn, ElInput, ElButton, ElRow, ElCol },
  setup() {
    const tableHeight = ref(window.innerHeight - 300); // 表格高度
    const leftData = ref([{ name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 }]); // 左侧数据
    const rightData = ref([{ name: '赵六', age: 24 }, { name: '钱七', age: 26 }]); // 右侧数据
    const leftSearch = ref(''); // 左侧搜索关键字
    const rightSearch = ref(''); // 右侧搜索关键字

    // 监听窗口大小变化，动态调整表格高度
    watch(() => window.innerHeight, (val) => {
      tableHeight.value = val - 300;
    });

    // 左侧搜索
    const handleLeftSearch = () => {
      const keyword = leftSearch.value.trim();
      if (keyword) {
        const list = leftData.value.filter((item) => item.name.includes(keyword));
        leftData.value = list;
      } else {
        leftData.value = [{ name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 }];
      }
    };

    // 右侧搜索
    const handleRightSearch = () => {
      const keyword = rightSearch.value.trim();
      if (keyword) {
        const list = rightData.value.filter((item) => item.name.includes(keyword));
        rightData.value = list;
      } else {
        rightData.value = [{ name: '赵六', age: 24 }, { name: '钱七', age: 26 }];
      }
    };

    // 左侧表格行点击事件
    const handleLeftRowClick = (row) => {
      leftData.value = leftData.value.filter((item) => item !== row);
      rightData.value.push(row);
    };

    // 右侧表格行点击事件
    const handleRightRowClick = (row) => {
      rightData.value = rightData.value.filter((item) => item !== row);
      leftData.value.push(row);
    };

    // 添加按钮点击事件
    const handleRightTransfer = () => {
      rightData.value.forEach((item) => {
        leftData.value = leftData.value.filter((i) => i !== item);
      });
      leftData.value.push(...rightData.value);
      rightData.value = [];
    };

    // 移除按钮点击事件
    const handleLeftTransfer = () => {
      leftData.value.forEach((item) => {
        rightData.value = rightData.value.filter((i) => i !== item);
      });
      rightData.value.push(...leftData.value);
      leftData.value = [];
    };

    return {
      tableHeight,
      leftData,
      rightData,
      leftSearch,
      rightSearch,
      handleLeftSearch,
      handleRightSearch,
      handleLeftRowClick,
      handleRightRowClick,
      handleRightTransfer,
      handleLeftTransfer,
    };
  },
};
</script>

以上代码中，左侧表格数据存储在`leftData`数组中，右侧表格数据存储在`rightData`数组中，通过搜索框的输入，可以实现数据的搜索功能；通过点击表格行和添加/移除按钮，可以实现数据的左右切换功能。