在vue3中 利用elelmentu plus表格左右排列 数据可以左右切换类似穿梭框,且实现穿梭框搜索功能两个表格上方有搜索框,前端如何做到搜索功能

在使用 Element Plus 的表格实现左右排列和切换时，还是可以利用 CSS 布局将两个表格分别放在左右两个 div 中。同时，Element Plus 提供了穿梭框组件 ElTransfer，可以实现数据的左右切换。

对于搜索功能，可以在上方搜索框中绑定一个 input 事件，将输入的搜索关键字传递给 Vue3 的 data 数据中，在穿梭框组件中使用 filterable 属性开启搜索功能，并设置 filter-method 属性，使用自定义的方法实现数据的模糊匹配。具体实现可以参考以下代码：

<template>
  <div>
    <input type="text" v-model="keyword" @input="handleSearch" placeholder="请输入搜索关键字">
    <el-transfer v-model="transferData" :data="transferList" :filterable="true" :filter-method="handleFilter"></el-transfer>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const transferData = ref([...]); // 穿梭框中已选数据
    const transferList = ref([...]); // 穿梭框数据源
    const keyword = ref(''); // 搜索关键字

    // 处理搜索
    const handleSearch = () => {
      // do something
    }

    // 处理穿梭框搜索
    const handleFilter = (query, item) => {
      const k = keyword.value && keyword.value.trim(); // 处理搜索关键字
      if (!k) {
        return true;
      } else {
        return item.label.indexOf(k) !== -1;
      }
    }

    return {
      transferData,
      transferList,
      keyword,
      handleSearch,
      handleFilter
    }
  }
}
</script>