因為數據量比較大，級聯選擇器使用了懶加載
還是因為數據量比較大，需求希望增加搜索功能
然后發現，僅加載第一級的時候根本搜不到，必須要三級加載完全才能搜到想搜的數據，但是都加載完了，搜索還有什么意義
使用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)
? ? ? }
? ? }
}
時間緊急，寫的比較粗糙，方法不是很優，但是是可以以實現需求的，大家可以根據自己需求再優化，如果有更好的方案，歡迎留言，謝謝
