vue3.2 使用el-ement-ui的 Transfer穿梭框的并且使用插槽使用选择器的实例

可以使用以下代码实现：

<template>
<el-transfer
v-model="data"
:titles="['源列表', '目标列表']"
:data="list"
:filterable="true"
:props="{
key: 'id',
label: 'name',
disabled: 'disabled'
}"
>
<template #left-footer>
<el-input
v-model="leftFilter"
placeholder="请输入关键字进行过滤"
size="small"
style="width: 100%; margin-bottom: 10px;"
/>
</template>
<template #right-footer>
<el-input
v-model="rightFilter"
placeholder="请输入关键字进行过滤"
size="small"
style="width: 100%; margin-bottom: 10px;"
/>
</template>
</el-transfer>
</template>

<script>
import { ref } from 'vue'
import { list } from './data'

export default {
name: 'TransferDemo',
setup() {
const data = ref([])
const leftFilter = ref('')
const rightFilter = ref('')

const filterMethod = (query, item) => {
return item.name.indexOf(query) > -1
}

const filterLeftData = () => {
const leftData = list.filter(item => !data.value.includes(item))
return leftData.filter(item => filterMethod(leftFilter.value, item))
}

const filterRightData = () => {
return data.value.filter(item => filterMethod(rightFilter.value, item))
}

return {
data,
list,
leftFilter,
rightFilter,
filterLeftData,
filterRightData
}
}
}
</script>