el-
elementui 的
穿梭框（
transfer）组件中，可以通过 `filterable` 属性来开启搜索功能，但是默认情况下是单选模式，无法进行多选。如果需要实现多选功能，可以通过自定义模板来实现。
具体步骤如下：
1. 在 `
el-
transfer` 组件中，设置 `left-default-checked` 和 `right-default-checked` 属性为 `false`，禁用默认选中状态。
2. 使用 `scoped-slot` 自定义左右两侧的模板，可以参考以下代码：
```
html
<template slot="left-footer">
<
el-checkbox-group v-mod
el="leftChecked">
<
el-checkbox lab
el="all" @change="handl
eLeftCheckAllChange">Check all</
el-checkbox>
</
el-checkbox-group>
</template>
<template slot="right-footer">
<
el-checkbox-group v-mod
el="rightChecked">
<
el-checkbox lab
el="all" @change="handleRightCheckAllChange">Check all</
el-checkbox>
</
el-checkbox-group>
</template>
<template slot="left-item" slot-scope="{ option }">
<
el-checkbox :lab
el="option.key" v-mod
el="leftChecked" :disabled="option.disabled">{{ option.lab
el }}</
el-checkbox>
</template>
<template slot="right-item" slot-scope="{ option }">
<
el-checkbox :lab
el="option.key" v-mod
el="rightChecked" :disabled="option.disabled">{{ option.lab
el }}</
el-checkbox>
</template>
```
3. 在 `data` 中定义 `leftChecked` 和 `rightChecked` 数组，以及 `handl
eLeftCheckAllChange` 和 `handleRightCheckAllChange` 方法，用于实现全选/全不选的功能。
4. 在 `methods` 中定义 `filterMethod` 方法，用于实现搜索功能的自定义过滤方法。
5. 在 `
el-
transfer` 组件中，设置 `:filter-method="filterMethod"`，启用自定义过滤方法。
完整代码如下所示：
```
html
<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-mod
el="leftChecked">
<
el-checkbox lab
el="all" @change="handl
eLeftCheckAllChange">Check all</
el-checkbox>
</
el-checkbox-group>
</template>
<template slot="right-footer">
<
el-checkbox-group v-mod
el="rightChecked">
<
el-checkbox lab
el="all" @change="handleRightCheckAllChange">Check all</
el-checkbox>
</
el-checkbox-group>
</template>
<template slot="left-item" slot-scope="{ option }">
<
el-checkbox :lab
el="option.key" v-mod
el="leftChecked" :disabled="option.disabled">{{ option.lab
el }}</
el-checkbox>
</template>
<template slot="right-item" slot-scope="{ option }">
<
el-checkbox :lab
el="option.key" v-mod
el="rightChecked" :disabled="option.disabled">{{ option.lab
el }}</
el-checkbox>
</template>
</
el-
transfer>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{ key: '1', lab
el: 'Option 1', disabled: false },
{ key: '2', lab
el: 'Option 2', disabled: false },
{ key: '3', lab
el: 'Option 3', disabled: false },
{ key: '4', lab
el: 'Option 4', disabled: false },
{ key: '5', lab
el: 'Option 5', disabled: false },
{ key: '6', lab
el: 'Option 6', disabled: false },
{ key: '7', lab
el: 'Option 7', disabled: false },
{ key: '8', lab
el: 'Option 8', disabled: false },
{ key: '9', lab
el: 'Option 9', disabled: false },
{ key: '10', lab
el: 'Option 10', disabled: false }
],
leftChecked: [],
rightChecked: []
};
},
methods: {
filterMethod(query, option) {
return option.lab
el.indexOf(query) > -1;
},
handl
eLeftCheckAllChange(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>
```
最低0.47元/天 解锁文章
418
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
