帮我实现一个简单的穿梭框并带搜索功能

好的，以下是一个基于 Element Plus 的简单穿梭框示例，带有搜索功能：

<template>
  <el-transfer
    v-model="selectedKeys"
    :data="data"
    :filterable="true"
    :filter-placeholder="'请输入搜索内容'"
    :filter-method="filterMethod"
  >
  </el-transfer>
</template>

<script>
export default {
  data() {
    return {
      selectedKeys: [], // 选中的数据项
      data: [ // 数据源
        { key: '1', label: '选项1' },
        { key: '2', label: '选项2'

相关问题

使用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 布局来实现简单的居中对齐。

vue 实现穿梭框，内容为checkbox，自带全选，筛选功能

您好，下面是一个简单的 Vue 穿梭框实现，包含复选框、全选和筛选功能：

<template>
  <div>
    <!-- 左侧内容区域 -->
    <div class="left">
      <div class="search">
        <input type="text" v-model="searchText" placeholder="请输入关键字">
        <button @click="search">搜索</button>
      </div>
      <div class="items">
        <label v-for="item in leftData" :key="item.id" :title="item.name">
          <input type="checkbox" v-model="item.checked" @change="checkAll">
          {{ item.name }}
        </label>
      </div>
    </div>
    <!-- 右侧选择区域 -->
    <div class="right">
      <div class="selected">
        <label v-for="item in selectedData" :key="item.id" :title="item.name">
          <input type="checkbox" v-model="item.checked" @change="checkAll">
          {{ item.name }}
        </label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftData: [
        { id: 1, name: '选项1', checked: false },
        { id: 2, name: '选项2', checked: false },
        { id: 3, name: '选项3', checked: false },
        { id: 4, name: '选项4', checked: false },
        { id: 5, name: '选项5', checked: false },
      ],
      selectedData: [],
      searchText: '',
    }
  },
  methods: {
    // 左侧筛选
    search() {
      const text = this.searchText.trim().toLowerCase()
      this.leftData.forEach(item => {
        item.hide = !item.name.toLowerCase().includes(text)
      })
    },
    // 全选
    checkAll() {
      const allChecked = this.leftData.every(item => item.checked)
      this.leftData.forEach(item => {
        item.checked = allChecked
      })
    },
  },
  // 计算属性
  computed: {
    // 过滤后的左侧数据
    filteredLeftData() {
      return this.leftData.filter(item => !item.hide)
    },
  },
}
</script>

<style>
.left {
  display: inline-block;
  width: 400px;
  border: 1px solid #ccc;
  padding: 10px;
  vertical-align: top;
}
.right {
  display: inline-block;
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  vertical-align: top;
}
.search {
  margin-bottom: 10px;
}
.items {
  max-height: 200px;
  overflow-y: auto;
}
.selected {
  max-height: 200px;
  overflow-y: auto;
}
</style>

在这个实现中，左侧区域会显示一组复选框，可以通过搜索框进行筛选，也可以通过全选按钮进行全选/全不选操作。选中的复选框会被添加到右侧区域中。

需要注意的是，这个实现只是一个简单的示例，如果需要更复杂的功能，可能需要进行进一步的扩展和修改。希望这个实现可以对您有所帮助！