使用js加上element plus的表格实现一个简单的穿梭框效果并带搜索功能

好的，以下是一个使用 JavaScript 和 Element Plus 表格实现的简单穿梭框，带有搜索功能：

<template>
  <div class="transfer">
    <div class="search">
      <el-input v-model="searchText" placeholder="请输入搜索内容" @input="search" />
    </div>
    <div class="table">
      <el-table :data="sourceData" height="300">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="名称" />
      </el-table>
    </div>
    <div class="actions">
      <el-button type="primary" size="small" @click="addToTarget">添加</el-button>
      <el-button type="primary" size="small" @click="removeFromTarget">移除</el-button>
    </div>
    <div class="table">
      <el-table :data="targetData" height="300">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="名称" />
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sourceData: [ // 源数据
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' },
        { id: 4, name: '选项4' },
        { id: 5, name: '选项5' },
      ],
      targetData: [], // 目标数据
      searchText: '', // 搜索关键词
    }
  },
  methods: {
    // 搜索方法
    search() {
      const keyword = this.searchText.trim().toLowerCase()
      if (!keyword) {
        this.sourceData = this.allSourceData // 没有关键词，显示全部数据
        return
      }
      this.sourceData = this.allSourceData.filter(item => {
        // 根据关键词进行模糊匹配
        return item.name.toLowerCase().includes(keyword)
      })
    },
    // 添加到目标列表
    addToTarget() {
      const selectedRows = this.$refs.sourceTable.selection
      if (selectedRows.length === 0) {
        return
      }
      const targetIds = this.targetData.map(item => item.id)
      selectedRows.forEach(row => {
        if (!targetIds.includes(row.id)) {
          this.targetData.push(row)
        }
      })
    },
    // 从目标列表中移除
    removeFromTarget() {
      const selectedRows = this.$refs.targetTable.selection
      if (selectedRows.length === 0) {
        return
      }
      const selectedIds = selectedRows.map(item => item.id)
      this.targetData = this.targetData.filter(item => {
        return !selectedIds.includes(item.id)
      })
    },
  },
  computed: {
    // 源数据（包括搜索结果）
    allSourceData() {
      return this.sourceData
    },
  },
}
</script>

<style scoped>
.transfer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.search {
  width: 200px;
  margin-right: 20px;
}

.table {
  margin-right: 20px;
}

.actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>

说明：

1. 穿梭框使用了 Element Plus 表格来实现，分为源数据表格和目标数据表格，通过添加和移除按钮实现数据的穿梭。
2. 在源数据表格上方使用了一个搜索框，通过输入关键词实现对源数据的模糊搜索。
3. 在 `allSourceData` 计算属性中，根据搜索关键词过滤源数据。
4. 在 `addToTarget` 和 `removeFromTarget` 方法中，通过获取选中的行来实现数据的添加和移除。
5. 在样式中，使用了 Flex 布局来实现简单的居中对齐。