欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2023年01月31日 11:05:07   作者：深擁i小褚  
我們在使用el-cascader控件往數(shù)據(jù)庫保存的都是最后一級的數(shù)據(jù),那如果再次編輯此條數(shù)據(jù)時(shí),直接給el-cascader傳入最后一級的數(shù)據(jù),它是不會自動勾選的,下面這篇文章主要給大家介紹了關(guān)于Element-UI中<el-cascader?/>回顯失敗問題的完美解決辦法,需要的朋友可以參考下

項(xiàng)目場景：

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

問題描述

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

原因分析：

value 屬性才是回顯的關(guān)鍵，只有綁定了value屬性才會讓 <el-cascader /> 回顯（單選情況下是一維數(shù)組、多選是二維數(shù)組），而且數(shù)組中的值一定是最后一級的id加上它父級的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: '長寧區(qū)'
		        }]
		    }, {
		        value: 12,
		        label: '江蘇',
		    }, {
		        value: 13,
		        label: '浙江',
		    }
	    ]
	}, 
	{
	    value: 2,
	    label: '西北',
	    children: [{
	        value: 21,
	        label: '陜西',
	    }, {
	        value: 22,
	        label: '新疆維吾爾族自治區(qū)',
	    }]
	}
]

解決方案：

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

/*
* @param  list 數(shù)據(jù)列表
* @param  id 后端返回的id
**/
getParentsById(list, id) {
    for (let i in list) {
        if (list[i].value == id) {
            //查詢到就返回該數(shù)組對象的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
            }
        }
    }
},

方法有了之后就開始解決問題

一、多選賦值回顯

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

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

因?yàn)楹蠖酥粫祷貋?11、12兩個(gè)值還是字符串格式"111,12"，所以處理開始

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

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

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

二、單選賦值回顯

方法和多選類似，因?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)，但是大問題得到了解決。

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

相關(guān)文章

最新評論