element級聯選擇器懶加載加搜索

因為數據量比較大,級聯選擇器使用了懶加載

還是因為數據量比較大,需求希望增加搜索功能

然后發現,僅加載第一級的時候根本搜不到,必須要三級加載完全才能搜到想搜的數據,但是都加載完了,搜索還有什么意義

使用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)

? ? ? }

? ? }

}

時間緊急,寫的比較粗糙,方法不是很優,但是是可以以實現需求的,大家可以根據自己需求再優化,如果有更好的方案,歡迎留言,謝謝

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容