备选项自定义:将自定义的 HTML 模板插入el-option
的 slot 中即可。
filter-method自定义:添加filterable
属性即可启用搜索功能, filter-method
传入自定义方法
v-for循环数组的key值不能绑定index
<el-select
v-model="inputForm.xh"
placeholder="请选择/搜索"
style="width: 100%"
filterable
:filter-method="filterMethod"
>
<el-option v-for="item in xsList" :key="item.xh" :label="item.xh" :value="item.xh">
<span style="float: left">{{ item.xh }}</span>
<span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
{{ item.xm }}
</span>
</el-option>
</el-select>
获取后台下拉框选项的时候给xsList和xsListCopy赋值
// 获取学生列表
async getxsList() {
const res = await xxszService.getXhxm()
this.xsList = res
this.xsListCopy = res
},
自定义方法
filterMethod(val) {
if (val) {
this.xsList = this.xsListCopy.filter((item) => {
if (item.xh.indexOf(val) > -1 || item.xm.indexOf(val) > -1) {
return true
}
})
} else {
this.xsList = this.xsListCopy
}
}