Vue Element Plus el-select 组件开启可筛选功能 (filterable)
要在 Vue 项目中使用 Element Plus 的 el-select 组件并开启 filterable 属性,需要按照以下步骤进行操作:
- 首先,确保你已经安装了 Element Plus 依赖,可以使用 npm 或 yarn 命令进行安装:
npm install element-plus --save
或者
yarn add element-plus
- 在你的 main.js(或者其他入口文件)中引入 Element Plus 并注册它:
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
- 在你的组件中使用 el-select,并设置 filterable 属性为 true:
<template>
<el-select v-model='selectedOption' filterable>
<el-option v-for='option in options' :key='option.value' :label='option.label' :value='option.value'></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' }
]
}
}
}
</script>
现在,el-select 组件将具有 filterable 属性,用户可以在下拉列表中搜索选项。
请注意,以上代码仅供参考,你可能需要根据你的实际需求进行适当的调整。
原文地址: https://www.cveoy.top/t/topic/pbik 著作权归作者所有。请勿转载和采集!