目錄

需求描述

1.實(shí)現(xiàn)動(dòng)態(tài)加載選項(xiàng)

2.數(shù)據(jù)回顯

3.組件BUG：再次編輯不再加載

4.點(diǎn)擊單選框選中節(jié)點(diǎn)時(shí)，同時(shí)加載下一級(jí)選項(xiàng)（額外需求）

5.點(diǎn)擊label標(biāo)簽時(shí)，能夠直接選中該節(jié)點(diǎn)（額外需求）

需求描述

需求情景描述

前端使用el-cascader組件來(lái)實(shí)現(xiàn)一個(gè)層級(jí)選擇器，可以支持單選或多選節(jié)點(diǎn)，節(jié)點(diǎn)的層級(jí)關(guān)系和名稱都由后端來(lái)定義和控制，前端根據(jù)后端提供的數(shù)據(jù)來(lái)渲染。

實(shí)現(xiàn)該需求，需要后端配合需要提供2個(gè)接口：

1.接口1：前端傳入指定節(jié)點(diǎn)ID，后端返回該節(jié)點(diǎn)的下一層所有節(jié)點(diǎn)ID信息列表。

2.接口2：前端傳入指定節(jié)點(diǎn)ID，后端返回該節(jié)點(diǎn)從頂部父節(jié)點(diǎn)至該節(jié)點(diǎn)的所有路徑節(jié)點(diǎn)ID列表。

級(jí)聯(lián)選擇器 el-cascader 使用

最關(guān)鍵的只有這兩項(xiàng)：v-model綁定值 和 props 配置項(xiàng)

<el-cascader
	v-model="IdList"
	:props="props"
></el-cascader>

1.實(shí)現(xiàn)動(dòng)態(tài)加載選項(xiàng)

常用props配置：

動(dòng)態(tài)加載選項(xiàng)不需要 : options 配置，一般靜態(tài)的才使用options配置。

• checkStrictly：true??是否可以選擇樹(shù)干節(jié)點(diǎn)作為選項(xiàng)（根據(jù)實(shí)際需求選擇）
• lazy：true??是否動(dòng)態(tài)加載節(jié)點(diǎn)（當(dāng)然，這正是我們需要的）
• lazyLoad: this.loadTreeNode 指定加載節(jié)點(diǎn)的方法，這里我定義的名字叫l(wèi)oadTreeNode
• multiple: true? 是否支持多選

props: {
    checkStrictly: true, //是否可以選擇樹(shù)干節(jié)點(diǎn)作為選項(xiàng)
    lazy: true, // 是否動(dòng)態(tài)加載子節(jié)點(diǎn)
    // lazyLoad加載動(dòng)態(tài)數(shù)據(jù)的方法(僅在 lazy 為 true 時(shí)有效)
    lazyLoad: this.loadTreeNode,
},

loadTreeNode ，自定義的加載節(jié)點(diǎn)的方法（具體邏輯看注釋基本就能看明白）：

//加載樹(shù)節(jié)點(diǎn)  首次加載頁(yè)面時(shí)就會(huì)執(zhí)行一次，之后每選中一個(gè)節(jié)點(diǎn)也會(huì)調(diào)用，來(lái)渲染下一層
loadTreeNode(node, resolve) {
    console.log(node);
    // 首次加載時(shí) node為{root:true,level:0}
    // node 節(jié)點(diǎn)數(shù)據(jù)  獲取node的level字段的值
    const { level } = node;
    //下一層節(jié)點(diǎn)
    const nodes = [];
    //如果有子節(jié)點(diǎn) 或者 為根節(jié)點(diǎn)（即首次進(jìn)入level為0）
    //也有人寫成 node.level == 0 作用是一樣的 
    if (node.hasChildren || node.root) {
        // 0 代表第一次請(qǐng)求
        let nodeId = level == 0 ? null : node.value;
        //這里setTimeout的目的是 顯示加載動(dòng)畫
        setTimeout(() => {
            //調(diào)用后端接口 獲得返回?cái)?shù)據(jù)
            let ret = this.api(nodeId);
            if (ret && ret.succeeded) {
                //ret.reulst為后端返回的數(shù)據(jù)
                let nodes = ret.result;
                // 回調(diào)渲染下一層
                resolve(nodes);
            } else {
                //后端報(bào)錯(cuò) 彈窗提示失敗
                this.$message({
                    type: "error",
                    message: "部門層級(jí)加載失敗，請(qǐng)聯(lián)系管理員！",
                });
            }
        }, 1);
    } else {
        //如果沒(méi)有子節(jié)點(diǎn)就不發(fā)起請(qǐng)求，直接渲染，也避免了點(diǎn)擊葉子節(jié)點(diǎn)仍然有加載動(dòng)畫的問(wèn)題
        resolve(nodes);
    }
},

葉子節(jié)點(diǎn) —— 意思是：沒(méi)有子節(jié)點(diǎn)的節(jié)點(diǎn)，它就是最底層。

其中 this.api 指的是調(diào)用后端提供的第一個(gè)接口：

接口1：前端傳入指定節(jié)點(diǎn)ID，返回該節(jié)點(diǎn)的下一層所有節(jié)點(diǎn)ID信息列表（當(dāng)nodeId為空時(shí)，返回第一層節(jié)點(diǎn)）。

返回的數(shù)據(jù)需要是一個(gè)列表，后端返回的數(shù)據(jù) List<UserGroupTreeNode> 大概長(zhǎng)這樣：

JAVA后端的節(jié)點(diǎn)定義可參考：

@Data
@AllArgsConstructor
@NoArgsConstructor
public class UserGroupTreeNode {
    /**
     * 節(jié)點(diǎn)值
     */
    private String value;
    /**
     * 節(jié)點(diǎn)標(biāo)簽
     */
    private String label;
    /**
     * 是否為葉子節(jié)點(diǎn)（即沒(méi)有子節(jié)點(diǎn)）  true 沒(méi)有子節(jié)點(diǎn) false 有子節(jié)點(diǎn)
     */
    private Boolean leaf;
}

其中value即為節(jié)點(diǎn)的ID，label為展示的名稱，leaf為是否含有子節(jié)點(diǎn)，Bool類型。

value，label，leaf 變量名務(wù)必保持一致，否則前端拿到數(shù)據(jù)之后，得自己轉(zhuǎn)成這個(gè)變量名。

（或者指定一下變量名稱也行，具體參考element-ui官方文檔。）

到這里，這個(gè)組件已經(jīng)可以實(shí)現(xiàn)新增保存的操作了。

2.數(shù)據(jù)回顯

問(wèn)題描述

上面已經(jīng)解決了層級(jí)選擇器的數(shù)據(jù)渲染問(wèn)題，用來(lái)做查詢條件篩選或者新增都已經(jīng)夠了。但是當(dāng)我們需要修改數(shù)據(jù)時(shí)，點(diǎn)擊修改打開(kāi)的彈窗中對(duì)應(yīng)的字段無(wú)法正確回顯。

預(yù)想中的效果應(yīng)該是：它應(yīng)該逐層展示，并且點(diǎn)擊它想要修改時(shí)，層級(jí)選擇器組件應(yīng)該默認(rèn)選中綁定的值。

目前實(shí)際的效果卻是：打開(kāi)后，數(shù)據(jù)雖然對(duì)應(yīng)上了，但是菜單并沒(méi)有自動(dòng)展開(kāi)，要重新一層一層手動(dòng)去選擇展開(kāi)，才能看到選中的數(shù)據(jù)，這顯然不符合實(shí)際需求。

解決思路：

1.首先，我們?cè)谛略鰯?shù)據(jù)時(shí)，級(jí)聯(lián)選擇器v-model綁定的參數(shù)是一個(gè)列表，

例如：我們選中【sub-1-2-3】這個(gè)節(jié)點(diǎn)時(shí)，

它實(shí)際綁定的值是：["root","sub-1","sub-1-2","sub-1-2-3"]。

而后端實(shí)際保存的值一般都是選中節(jié)點(diǎn)的id，即"sub-1-2-3"。

2.已知el-cascader組件綁定的值是一個(gè)列表，所以當(dāng)我們需要正確回顯，也需要給它賦值一個(gè)數(shù)組才行。

所以我們需要與后端約定的第二個(gè)接口

接口2：前端傳入指定節(jié)點(diǎn)ID，后端返回該節(jié)點(diǎn)從頂部父節(jié)點(diǎn)至該節(jié)點(diǎn)的所有路徑節(jié)點(diǎn)ID列表。

格式如下圖，需要特別注意的是順序需要和實(shí)際節(jié)點(diǎn)層級(jí)順序一致！

這里返回的是節(jié)點(diǎn)的ID數(shù)組列表，

前端拿到它后，直接賦值給 el-cascader 組件v-model綁定的變量即可。

然后就可以正常顯示啦！

這樣就處理完成了，但是還有一個(gè)問(wèn)題，應(yīng)該算是element-ui的BUG。

3.組件BUG：再次編輯不再加載

問(wèn)題情景描述

按照前面的實(shí)現(xiàn)后，如果需求是做增刪改查，只要涉及到修改，自然需要點(diǎn)擊編輯按鈕時(shí)，在頁(yè)面中數(shù)據(jù)回顯，才能編輯。但是只有在首次加載頁(yè)面后，編輯數(shù)據(jù)A時(shí)，數(shù)據(jù)A回顯一切正常，之后關(guān)閉彈窗，再編輯其他數(shù)據(jù)，此時(shí)的修改彈窗中el-cascader 組件文本框中，回顯都為空，不再正?；仫@了。

分析原因：

首次編輯數(shù)據(jù)時(shí)，el-cascader?會(huì)根據(jù)v-model綁定的參數(shù)值，

比如["1","2","3","4"] 這個(gè)數(shù)組

逐層調(diào)用lazyLoad獲取整個(gè)樹(shù)結(jié)構(gòu)，

即：依次將 "1","2","3","4"作為參數(shù)，調(diào)用lazyLoad，分別渲染頭結(jié)點(diǎn)"1"，頭結(jié)點(diǎn)下一層，ID為節(jié)點(diǎn)"2"的下一層，以及下一層中，ID為“3”的下一層，最后整個(gè)合并起來(lái)。

整個(gè)過(guò)程是組件自動(dòng)完成的。

所以能正確回顯。

但是當(dāng)關(guān)閉編輯彈窗，再編輯其他數(shù)據(jù)時(shí)，雖然el-cascader 組件v-model綁定的參數(shù)值發(fā)生了變化，但是沒(méi)有再觸發(fā)調(diào)用lazyLoad方法再逐層請(qǐng)求后端渲染整個(gè)結(jié)構(gòu)樹(shù)。

目前網(wǎng)上的解決辦法總體有兩種思路：

• 1.給el-cascader組件綁定 options選項(xiàng)，根據(jù)v-model綁定參數(shù)的值，也就是數(shù)組的值，手動(dòng)調(diào)用后端接口，逐個(gè)獲取下一層的選項(xiàng)，拼接成樹(shù)結(jié)構(gòu)，將生成樹(shù)結(jié)構(gòu)給 el-cascader 使用，這樣就能正確回顯。這種思路其實(shí)本質(zhì)上就是自己寫lazyLoad的邏輯，放棄使用官方提供的lazyLoad方法（不推薦）。
• 2.將?el-cascader 組件 重新渲染一次，既然首次加載的時(shí)候能正確調(diào)用lazyLoad，那每次都重新來(lái)，都當(dāng)成首次加載就好了，這就是用v-if解決的思路（推薦）。

方法1實(shí)現(xiàn)起來(lái)太復(fù)雜，方法二簡(jiǎn)單很多，推薦使用方法2。

方法2具體實(shí)現(xiàn)：

給?el-cascader組件 加上? ?v-if="editCascaderVisible"?

<el-cascader
	v-if="editCascaderVisible"
	v-model="IdList"
	:props="props"
></el-cascader>

然后在editRow，即打開(kāi)修改彈窗方法時(shí)，手動(dòng)控制它刷新一次：

關(guān)鍵代碼：

	this.editCascaderVisible = false;
	// 這里搞個(gè)定時(shí)器重新載入一下組件就可以觸發(fā)組件拉取數(shù)據(jù)
	setTimeout(() => {
		this.editCascaderVisible = true;
	}, 1);

完整代碼：

editRow(rowData) {

	this.editCascaderVisible = false;
	// 這里搞個(gè)定時(shí)器重新載入一下組件就可以觸發(fā)組件拉取數(shù)據(jù)
	setTimeout(() => {
		this.editCascaderVisible = true;
	}, 1);

	this.IdList= [];
	//在編輯的時(shí)候等到DOM更新完成再賦值
	this.$nextTick(() => {
        //將選中數(shù)據(jù)的值 賦值給表單
		this.dataForm = Object.assign({}, rowData);
	});
    //調(diào)用后端接口，獲取自頂向下逐個(gè)層級(jí)ID的列表  這里我el-cascader綁定的變量是IdList
	this.IdList= this.api_getIdList(rowData.groupId);
    //打開(kāi)修改彈窗
	this.dialogVisible = true;
}

這樣每次點(diǎn)擊編輯的時(shí)候，就都能正確回顯了。

另外希望element-ui官方能修復(fù)這個(gè)問(wèn)題，這樣我們也不用折騰了。

4.點(diǎn)擊單選框選中節(jié)點(diǎn)時(shí)，同時(shí)加載下一級(jí)選項(xiàng)（額外需求）

需求情景描述

當(dāng)我們直接點(diǎn)擊【萬(wàn)州支行】標(biāo)簽左側(cè)的單選框時(shí)，只執(zhí)行了選中操作，此時(shí)不會(huì)加載【萬(wàn)州支行】的下屬機(jī)構(gòu)，但是實(shí)際使用時(shí)，我們?cè)邳c(diǎn)擊選中時(shí)，又想看到下一級(jí)的機(jī)構(gòu)選項(xiàng)怎么辦？

如下圖所示，因?yàn)槲覀兪褂玫氖莑azyLoad模式，點(diǎn)擊單選框選中時(shí)，不會(huì)觸發(fā)加載下一級(jí)選項(xiàng)：

解決思路：已知：當(dāng)選中的節(jié)點(diǎn)發(fā)生變化時(shí)，就會(huì)觸發(fā)change方法，而我們點(diǎn)擊選項(xiàng)文字標(biāo)簽（即label）時(shí)，組件就會(huì)觸發(fā)加載下一級(jí)節(jié)點(diǎn)。所以：我們可以在change方法內(nèi)，模擬點(diǎn)擊文字標(biāo)簽，即可解決這個(gè)問(wèn)題。

由于在頁(yè)面布局上，單選框radio的同級(jí)下一個(gè)元素，就是label，所以用dom去獲取它的同級(jí)下一個(gè)元素，再手動(dòng)執(zhí)行一次click事件即可。

?實(shí)現(xiàn)代碼：

<el-cascader
	@change="handleChange"
	v-if="editCascaderVisible"
	v-model="IdList"
	:props="props"
></el-cascader>

//處理單選點(diǎn)擊事件
handleChange(e) {
	this.$nextTick(() => {
		const dom = document.getElementsByClassName("el-radio is-checked");
		//這里我把dom打出來(lái)看了 最后一個(gè)選項(xiàng)才是我選中的節(jié)點(diǎn) 即[length-1] 有的博主寫的是 第一個(gè)元素 即[0] 大家自行嘗試
		let radioDom = dom[dom.length - 1];
		const brother = radioDom.nextElementSibling;
		brother.click();
	});
},

5.點(diǎn)擊label標(biāo)簽時(shí)，能夠直接選中該節(jié)點(diǎn)（額外需求）

需求情景描述

單選的情況下，要選中某個(gè)節(jié)點(diǎn)選項(xiàng)，需要點(diǎn)擊radio按鈕，而radio本身很小，所以它的的可點(diǎn)擊區(qū)域也很小，想直接點(diǎn)中它，還得眼神好一點(diǎn)才行，不太方便，如果能點(diǎn)擊標(biāo)簽頁(yè)直接選中它就好了。

解決思路：既然點(diǎn)擊區(qū)域很小，那就用css把它本體放大就好了。把單選框的范圍放大到整個(gè)標(biāo)簽范圍，點(diǎn)擊標(biāo)簽相當(dāng)于點(diǎn)單選框。

實(shí)現(xiàn)代碼：

<style>
/*單選的級(jí)聯(lián)選擇器，點(diǎn)擊標(biāo)簽頁(yè)就可以選中*/
.el-cascader-menu .el-radio {
    display: table;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    margin-left: -25px;
    padding-left: 15px;
    margin-top: 6px;
}
.el-cascader-menu .el-radio .el-radio__input {
    display: table-cell;
    vertical-align: middle;
}
</style>

如果對(duì)你有幫助，還請(qǐng)點(diǎn)贊支持 ~

記錄一下解決過(guò)程中對(duì)?el-cascader 組件的其他認(rèn)識(shí)：

<el-cascader
	ref="editCascader"
	v-model="departmentIdList"
	:props="propsSearch"
	placeholder="請(qǐng)選擇業(yè)務(wù)部門"
	style="width: 15vw"
></el-cascader>

加入ref，可以使用

this.$refs.editCascader.panel

獲取到?el-cascader 對(duì)象

可以使用

this.$refs.editCascader.panel.lazyLoad(cqbankNode);

?主動(dòng)調(diào)用lazyLoad綁定的方法，傳入的節(jié)點(diǎn)要有chidren字段，或者直接取自

let cqbankNode = this.$refs.editCascader.panel.menus[0][0];

menus是菜單項(xiàng)

menus[0]即第一個(gè)下拉框列表，

menus[1]即第二個(gè)下拉框列表，可以通過(guò)修改menus，修改下拉框展示列。

但是根據(jù) menus[0][0] 去獲取，有時(shí)候節(jié)點(diǎn)children為空，可能應(yīng)該換一個(gè)屬性去獲取，這個(gè)思路應(yīng)該也能做，當(dāng)時(shí)是取值屬性來(lái)源錯(cuò)了，為空就寫不下去了就換思路了。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-467309.html

到了這里，關(guān)于el-cascader 動(dòng)態(tài)加載選項(xiàng)、編輯時(shí)數(shù)據(jù)回顯問(wèn)題 、單選不加載下一級(jí)節(jié)點(diǎn)、點(diǎn)擊標(biāo)簽選中的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！