el-cascader默认是不支持远程搜索的,但是需要实现这个功能,记录实现的方法:
<el-cascader
v-model="data"
:options="mafOptions"
style="width: 100%"
filterable
clearable
lazy
placeholder="输入名称进行查找"
:before-filter="get_tree" **关键地方**
@change="handleChange"
/>
主要是在before-filter这里实现远程搜索功能
get_tree(value) { // 在此处请求远程接口,并进行数据处理
get_list_type({
struct_name: value,
page_size: 10,
page_index: 1
})
.then((res) => {
const { data } = res
if (data.code === 0) {
return data.data
}
})
.then((mafList) => {
const promiseList = mafList.map((maf) => {
return get_list_version({ maf_interface_id: maf.id }).then(
(res) => {
const { data } = res
if (data.code === 0) {
maf.version_list = data.data
}
return maf
}
)
})
return Promise.all(promiseList)
})
.then((resList) => {
// 把数据处理成 组件需要的格式
const result = resList.map((maf) => {
const item = {
value: maf.id,
label: maf.struct_name,
children: []
}
maf.version_list.forEach((version) => {
item.children.push({
value: version.id,
label: version.version
})
})
return item
})
this.mafOptions = result // this.mafOptions就是来展示的数据,实现远程搜索
})
return false
},