效果圖

我們的數(shù)據(jù)格式

因?yàn)槲覀兊淖侄魏凸倬W(wǎng)提供的字段完全不同,所以需要轉(zhuǎn)換

上代碼

<el-cascaderref="lazytree":show-all-levels="false":options="treeData":props="defaultProps":key="isResouceShow" // 此處加key是為了在重置查詢清空值時不報錯@change="handleNodeClick"/>

然后在data里面定義defaultProps

defaultProps: {label: "nodeName",nodeType: "nodeType",value: "nodeId",children: "childrenList",},

然后接口和處理數(shù)據(jù)

// 獲取樹狀采集指標(biāo)類型async queryTreeList() {try {const res = await queryTreeList();const treeList = [res.data];this.treeData = this.formatData(treeList);} catch (error) {console.log(error);}},// 過濾掉級聯(lián)選擇器空的childrenListformatData(data) {for (var i = 0; i < data.length; i++) {if (data[i].childrenList == null || data[i].childrenList.length == 0) {data[i].childrenList = undefined;} else if (data[i].childrenList.length > 1) {this.formatData(data[i].childrenList);}}return data;},

查詢的時候獲取選擇檢點(diǎn)的數(shù)據(jù)

// 節(jié)點(diǎn)單擊事件handleNodeClick() {let nodeData = this.$refs.lazytree.getCheckedNodes(); // 獲取點(diǎn)擊的節(jié)點(diǎn)的數(shù)據(jù)let datas = nodeData[0].data;this.form.dataitemid = datas.nodeId || "";this.form.dataitemidname = datas.nodeName || "";this.currentDataitemid = datas.nodeId || "";this.queryParams.nodeId = datas.nodeId || "";this.queryParams.nodeType = datas.nodeType || "";this.getList();},

當(dāng)有需要清空已經(jīng)選擇的值得時候
data里面定義 : isResouceShow: 1,
然后

/** 重置按鈕操作 */resetQuery() {this.resetForm("queryForm");// 清空選中節(jié)點(diǎn)和高亮節(jié)點(diǎn)this.$nextTick(() => {this.$refs.lazytree.$refs.panel.clearCheckedNodes();this.$refs.lazytree.$refs.panel.activePath = [];});++this.isResouceShow; // 強(qiáng)制刷新級聯(lián)選擇器,這樣就不會報錯this.queryParams.nodeId = "";this.queryParams.nodeType = "";this.handleQuery();},

-----------------------------------------------手動分割-----------------------------------------------------------------------

禁用第一個選項(xiàng)

// 獲取設(shè)備設(shè)施getTreeselect() {queryAllAmAssetsTree().then((res) => {let items = res.data ? res.data : [];const treeList = [items];this.options = this.formatData(treeList);// 遍歷第一級的時候不允許點(diǎn)擊this.options.forEach((item) => {if (item.nodeType == "company") {item.disabled = true;}});}).catch((err) => {console.log(err);});},

總結(jié)

以上是生活随笔為你收集整理的el-cascader级联选择器,解决最后一级空白过滤掉空的children,并且使用props设置children等参数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。