快捷導(dǎo)航

Element-UI中<el-cascader?/>回顯失敗問(wèn)題的完美解決

更新時(shí)間：2023年01月31日 11:05:07 作者：深擁i小褚

我們?cè)谑褂胑l-cascader控件往數(shù)據(jù)庫(kù)保存的都是最后一級(jí)的數(shù)據(jù),那如果再次編輯此條數(shù)據(jù)時(shí),直接給el-cascader傳入最后一級(jí)的數(shù)據(jù),它是不會(huì)自動(dòng)勾選的,下面這篇文章主要給大家介紹了關(guān)于Element-UI中<el-cascader?/>回顯失敗問(wèn)題的完美解決辦法,需要的朋友可以參考下

項(xiàng)目場(chǎng)景：

項(xiàng)目場(chǎng)景：接手了一些老項(xiàng)目，需要做一些日志相關(guān)的操作，從后臺(tái)日志跳轉(zhuǎn)到相應(yīng)頁(yè)面要帶上原來(lái)的請(qǐng)求參數(shù)，涉及到一個(gè)回顯問(wèn)題

問(wèn)題描述

Element-UI的 <el-cascader /> 這個(gè)組件，賦值之后它不會(huì)回顯！而且后端返回的值只有最后一級(jí)的id，可是一個(gè)勁看文檔、找資料浪費(fèi)大半天，所以總結(jié)了一個(gè)比較完美的辦法

原因分析：

value 屬性才是回顯的關(guān)鍵，只有綁定了value屬性才會(huì)讓 <el-cascader /> 回顯（單選情況下是一維數(shù)組、多選是二維數(shù)組），而且數(shù)組中的值一定是最后一級(jí)的id加上它父級(jí)的id組成

在這里放一下模擬的數(shù)據(jù)

depart_check: [],
options: [
	{
	    value: 1,
	    label: '東南',
	    children: [
	    	{
		        value: 11,
		        label: '上海',
		        children: [{
		            value: 111,
		            label: '黃浦區(qū)'
		        }, {
		            value: 112,
		            label: '靜安區(qū)'
		        }, {
		            value: 113,
		            label: '虹口區(qū)'
		        }, {
		            value: 114,
		            label: '長(zhǎng)寧區(qū)'
		        }]
		    }, {
		        value: 12,
		        label: '江蘇',
		    }, {
		        value: 13,
		        label: '浙江',
		    }
	    ]
	}, 
	{
	    value: 2,
	    label: '西北',
	    children: [{
	        value: 21,
	        label: '陜西',
	    }, {
	        value: 22,
	        label: '新疆維吾爾族自治區(qū)',
	    }]
	}
]

解決方案：

由于后端返回來(lái)的只有最后一級(jí)的id，所以我們需要寫(xiě)一個(gè)遞歸來(lái)拿到最后一級(jí)id和它父級(jí)id的數(shù)組
廢話不多說(shuō)直接上代碼

/*
* @param  list 數(shù)據(jù)列表
* @param  id 后端返回的id
**/
getParentsById(list, id) {
    for (let i in list) {
        if (list[i].value == id) {
            //查詢到就返回該數(shù)組對(duì)象的value
            return [list[i].value]
        }
        if (list[i].children) {
            let node = this.getParentsById(list[i].children, id)
            if (node !== undefined) {
                //查詢到把父節(jié)把父節(jié)點(diǎn)加到數(shù)組前面
                node.unshift(list[i].value)
                return node
            }
        }
    }
},

方法有了之后就開(kāi)始解決問(wèn)題

一、多選賦值回顯

因?yàn)槎噙x的時(shí)候綁定的value是個(gè)二維數(shù)組
比如隨便選倆，change事件拿到的值就是[[1,11,111], [1,12] ]

// 選擇單位
  handlechangedepatt(v) {
  	  console.log(v)
      this.depart_check = v
  },

因?yàn)楹蠖酥粫?huì)返回來(lái)111、12兩個(gè)值還是字符串格式"111,12"，所以處理開(kāi)始

	let _depart_check = data.depart_id ? data.depart_id.split(",").map(i => Number(i)) : []
	let _arr = []
	// 使用上面寫(xiě)的方法 getParentsById 找出父級(jí)id并組合
	_depart_check && _depart_check.map(i => _arr.push(this.getParentsById(this.options, i)))
	console.log("_arr: ",_arr)
	this.depart_check = _arr

控制臺(tái)打印拿到的_arr，完美和change事件里拿到的值是一個(gè)格式，這樣回顯就完成了

這里有一個(gè)小問(wèn)題就是，拿到的id可能很多個(gè)，getParentsById方法只能一個(gè)一個(gè)找父級(jí)id，所以需要依次獲取

二、單選賦值回顯

方法和多選類(lèi)似，因?yàn)閱芜xchange選中的值是一位數(shù)組，比如：[ 1,11,111 ]所以當(dāng)拿到后端id之后不需要太多處理，只需要根據(jù)id和數(shù)據(jù)拿到一個(gè)一維數(shù)組的數(shù)據(jù)就行了，就不多解釋了

	let _depart_check = data.depart_id || ""
	let _arr = []
	_arr = this.getParentsById(this.options, _depart_check )
	this.depart_check = _arr

總結(jié)

以上就是el-cascader回顯失敗的解決辦法，可能有些小地方不夠嚴(yán)謹(jǐn)，但是大問(wèn)題得到了解決。

到此這篇關(guān)于Element-UI中<el-cascader />回顯失敗問(wèn)題的完美解決的文章就介紹到這了,更多相關(guān)el-cascader回顯失敗解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: