ext 下拉支持多选和搜索 的例子
时间: 2024-01-08 19:03:42 浏览: 27
以下是一个基于 Vue.js 和 Element UI 的示例代码:
```html
<template>
<div>
<el-select
v-model="selectedOptions"
multiple
filterable
remote
:remote-method="fetchOptions"
:loading="loading"
:multiple-limit="5"
:collapse-tags="true"
placeholder="请选择"
style="width: 300px">
<el-option
v-for="option in options"
:key="option.value"
:label="option.label"
:value="option.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [], // 所有选项
selectedOptions: [], // 已选中的选项
loading: false // 是否正在加载选项
}
},
methods: {
// 远程获取选项
fetchOptions(query) {
this.loading = true
setTimeout(() => {
// 模拟异步请求数据
const options = [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
{ label: '选项4', value: 'option4' },
{ label: '选项5', value: 'option5' },
{ label: '选项6', value: 'option6' }
]
this.options = options.filter(option => {
return option.label.toLowerCase().indexOf(query.toLowerCase()) !== -1
})
this.loading = false
}, 1000)
}
}
}
</script>
```
这个例子中,我们使用了 Element UI 的 `el-select` 组件来实现下拉多选框,并启用了多选、搜索和远程加载选项的功能。通过 `:remote-method` 属性指定远程获取选项的函数,并在 `fetchOptions` 函数中模拟了一个异步请求数据的过程。同时,我们还设置了 `:multiple-limit` 属性来限制最多可选的选项数量,以及 `:collapse-tags` 属性来让已选中的选项以标签的形式展示。