el-elementui的穿梭框的多选框

el-elementui 的穿梭框（transfer）组件中，可以通过 `filterable` 属性来开启搜索功能，但是默认情况下是单选模式，无法进行多选。如果需要实现多选功能，可以通过自定义模板来实现。

具体步骤如下：

1. 在 `el-transfer` 组件中，设置 `left-default-checked` 和 `right-default-checked` 属性为 `false`，禁用默认选中状态。

2. 使用 `scoped-slot` 自定义左右两侧的模板，可以参考以下代码：

   <template slot="left-footer">
     <el-checkbox-group v-model="leftChecked">
       <el-checkbox label="all" @change="handleLeftCheckAllChange">Check all</el-checkbox>
     </el-checkbox-group>
   </template>
   <template slot="right-footer">
     <el-checkbox-group v-model="rightChecked">
       <el-checkbox label="all" @change="handleRightCheckAllChange">Check all</el-checkbox>
     </el-checkbox-group>
   </template>
   <template slot="left-item" slot-scope="{ option }">
     <el-checkbox :label="option.key" v-model="leftChecked" :disabled="option.disabled">{{ option.label }}</el-checkbox>
   </template>
   <template slot="right-item" slot-scope="{ option }">
     <el-checkbox :label="option.key" v-model="rightChecked" :disabled="option.disabled">{{ option.label }}</el-checkbox>
   </template>

3. 在 `data` 中定义 `leftChecked` 和 `rightChecked` 数组，以及 `handleLeftCheckAllChange` 和 `handleRightCheckAllChange` 方法，用于实现全选/全不选的功能。

4. 在 `methods` 中定义 `filterMethod` 方法，用于实现搜索功能的自定义过滤方法。

5. 在 `el-transfer` 组件中，设置 `:filter-method="filterMethod"`，启用自定义过滤方法。

完整代码如下所示：

<template>
  <div>
    <el-transfer :data="data" :filterable="true" :filter-method="filterMethod" :left-default-checked="false" :right-default-checked="false">
      <template slot="left-footer">
        <el-checkbox-group v-model="leftChecked">
          <el-checkbox label="all" @change="handleLeftCheckAllChange">Check all</el-checkbox>
        </el-checkbox-group>
      </template>
      <template slot="right-footer">
        <el-checkbox-group v-model="rightChecked">
          <el-checkbox label="all" @change="handleRightCheckAllChange">Check all</el-checkbox>
        </el-checkbox-group>
      </template>
      <template slot="left-item" slot-scope="{ option }">
        <el-checkbox :label="option.key" v-model="leftChecked" :disabled="option.disabled">{{ option.label }}</el-checkbox>
      </template>
      <template slot="right-item" slot-scope="{ option }">
        <el-checkbox :label="option.key" v-model="rightChecked" :disabled="option.disabled">{{ option.label }}</el-checkbox>
      </template>
    </el-transfer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { key: '1', label: 'Option 1', disabled: false },
        { key: '2', label: 'Option 2', disabled: false },
        { key: '3', label: 'Option 3', disabled: false },
        { key: '4', label: 'Option 4', disabled: false },
        { key: '5', label: 'Option 5', disabled: false },
        { key: '6', label: 'Option 6', disabled: false },
        { key: '7', label: 'Option 7', disabled: false },
        { key: '8', label: 'Option 8', disabled: false },
        { key: '9', label: 'Option 9', disabled: false },
        { key: '10', label: 'Option 10', disabled: false }
      ],
      leftChecked: [],
      rightChecked: []
    };
  },
  methods: {
    filterMethod(query, option) {
      return option.label.indexOf(query) > -1;
    },
    handleLeftCheckAllChange(checked) {
      if (checked) {
        this.leftChecked = this.data.map(item => item.key);
      } else {
        this.leftChecked = [];
      }
    },
    handleRightCheckAllChange(checked) {
      if (checked) {
        this.rightChecked = this.data.map(item => item.key);
      } else {
        this.rightChecked = [];
      }
    }
  }
};
</script>