因为数据量比较大，级联选择器使用了懒加载
还是因为数据量比较大，需求希望增加搜索功能
然后发现，仅加载第一级的时候根本搜不到，必须要三级加载完全才能搜到想搜的数据，但是都加载完了，搜索还有什么意义
使用checkStrictly：true，倒是可以搜索，但是搜索出来的结果完全跟下一级无关，无法加载下级分类，不能实现需求
尝试：前端筛选node重新加载，结果筛选没问题，但是在加载下级分类时无法加载，bug紧急，具体原因还没有详查
最终解决办法：获取关键词，进行远程搜索，得到结果后重新加载组件，清空数据和删除搜索关键词时也要重新加载组件初始化数据
代码如下：
//组件（key必须要加，不然重新加载组件会有问题）
<el-cascader
ref="classify"
:key="key"
v-model="classify"
:props="classifyProp"
clearable
filterable
placeholder="请选择商品品类"
:before-filter="beforeFilter"
@change="classifyChange"
@myInput="handleInput"
/>
//监听清空关键词时要重新加载，清空选择时也要重新加载
watch: {
classify: {
handler(newVal, oldVal) {
if (newVal.length === 0 && oldVal.length > 0) {
this.clear()
}
},
deep: true,
immediate: true
},
inputWord(newVal, oldVal) {
if (!newVal) {
this.clear()
}
}
},
methods: {
//输入时获取关键词，主要用于判断用户何时清空了关键词
handleInput(val) {
this.inputWord = val
},
//搜索之前获取关键词，必须要return false停止组件默认的搜索
beforeFilter(value) {
this.keyWord = value
this.key++
return false
},
// 重写组件input事件， that.$emit('myInput', val)是关键，否则监听不到用户删除了关键词，无法重置数据
resetInput() {
this.$nextTick(() => {
const that = this.$refs.classify
this.$refs.classify.handleInput = function(val, event) {
that.$emit('myInput', val)
!that.dropDownVisible && that.toggleDropDownVisible(true)
if (event && event.isComposing) return
if (val) {
that.filterHandler()
} else {
that.filtering = false
}
}
})
},
// 清空选中时，重置下拉选项，清空输入，默认展开下拉面板
clear() {
this.keyWord = ''
this.key++
this.$nextTick(() => {
this.$refs.classify.$refs.input.focus()
this.$refs.classify.toggleDropDownVisible()
})
},
// 懒加载数据
async classifyLazyLoad(node, resolve) {
//重写组件input事件
this.resetInput()
const params = {}
if (this.keyWord) { //如果有关键词，带上关键词获取，需要接口支持
params.key = this.keyWord
}
if (!node) {
return false
}
const { level } = node
if (level === 0) {
const [err, res] = await GetFirstCategories(params)
if (err) return
let node0 = []
//如果是根据关键词搜索的，那么加载完要把关键词再填上去，获取焦点，打开下拉面板显示搜素结果
if (this.keyWord) {
this.$refs.classify.inputValue = this.keyWord
this.$refs.classify.$refs.input.focus()
this.$refs.classify.toggleDropDownVisible()
resolve(node0)
}
node0 = res.map((value, i) => ({
value: value.code,
label: value.name,
id: value.id,
leaf: node.level >= 2
}))
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
resolve(node0)
}
if (level === 1) {
const [err1, res1] = await GetSecondCateGories({
parentId: node.data.id
})
if (err1) return
const node1 = res1.map((value1, i1) => ({
value: value1.code,
label: value1.name,
id: value1.id,
leaf: node.level >= 2
}))
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
resolve(node1)
}
if (level === 2) {
const [err2, res2] = await GetSecondCateGories({
parentId: node.data.id
})
if (err2) return
const node2 = res2.map((value2, i2) => ({
value: value2.code,
label: value2.name,
id: value2.id,
leaf: node.level >= 2
}))
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
resolve(node2)
}
}
}
时间紧急，写的比较粗糙，方法不是很优，但是是可以以实现需求的，大家可以根据自己需求再优化，如果有更好的方案，欢迎留言，谢谢
