vue之ele多級(jí)聯(lián)組件的使用方法詳解
本文實(shí)例為大家分享了vue之ele多級(jí)聯(lián)組件的使用具體代碼,供大家參考,具體內(nèi)容如下
多級(jí)聯(lián)組件的使用
html
<el-cascader ? ? ? ? ref="cascader" ? ? ? ? :options="options" ? ? ? ? @focus="cascaderFocus" ? ? ? ? @change="cascaderChange" ? ? ? ? v-model="cascadeValue" ? ? ? ? :props="propsVal" ? ? ? ? popper-class="cascader" ></el-cascader>
js
data () { ? ? return { ?? ??? ?options : [ ? ? ? ? { ? ? ? ? ? value: "01", ? ? ? ? ? label: "科技", ? ? ? ? ? parentValue: "0", ? ? ? ? ? children: [ ? ? ? ? ? ? { ? ? ? ? ? ? ? value: "0101", ? ? ? ? ? ? ? label: "半導(dǎo)體", ? ? ? ? ? ? ? parentValue: "01", ? ? ? ? ? ? ? children: [ ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? value: "010101", ? ? ? ? ? ? ? ? ? label: "環(huán)", ? ? ? ? ? ? ? ? ? parentValue: "0101", ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ], ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? value: "0102", ? ? ? ? ? ? ? label: "半導(dǎo)體2", ? ? ? ? ? ? ? parentValue: "01", ? ? ? ? ? ? ? children: [ ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? value: "010201", ? ? ? ? ? ? ? ? ? label: "顯1", ? ? ? ? ? ? ? ? ? parentValue: "0102", ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ], ? ? ? ? ? ? }, ? ? ? ? ? ? { value: "0103", label: "產(chǎn)業(yè)", parentValue: "01" }, ? ? ? ? ? ], ? ? ? ? }, ? ? ? ? {value: "02", label: "業(yè)", parentValue: "0" }, // 沒(méi)有子集的時(shí)候? ? ? ? ? {value: "04", label: "類", parentValue: "0",children: [], } ? ? ? ], ?? ??? ??? ?cascadeValue: [], //級(jí)聯(lián)選中的值 ?? ??? ??? ?currentIndustry:[],? ? ? ? propsVal: { ? ? ? ? checkStrictly: true, ? ? ? }, ? ? }; ? }, ? methods: { ? ? cascaderFocus(){ ?? ??? ??? ?console.log("jiagouFocus"); ? ? }, ? ? cascaderChange(valArr){ ?? ? console.log("jgTreeChange", valArr); ? ? ? this.currentIndustry = valArr ? ? }, ? } ? // 重置的時(shí)候 ? ? reset() { ? ? ? this.$refs.cascader.checkedValue = []; ? ? ? this.$refs.cascader.dropDownVisible = false; ? ? },
css
.cascader .el-scrollbar{ ? min-width: 120px!important; ? max-width: 100%; } .cascader .el-cascader-node{ ? padding: 0 18px 0 0; ? height: 30px; } .cascader.el-cascader-node .el-cascader-node__postfix{ ? right: 5px; } .cascader .el-cascader-node > .el-radio{ ? margin-left: 7px; }
vue 之ele多級(jí)聯(lián)組件 添加額外的按鈕
需求:
- 第一層:集團(tuán); 第二層:板塊; 第三層:產(chǎn)業(yè)
- 在ele多級(jí)聯(lián)組件之中,第一層的時(shí)候添加一個(gè)全部按鈕,點(diǎn)擊第一層的全部的時(shí)候,則直接查詢所有集團(tuán)的數(shù)據(jù);
- 在ele多級(jí)聯(lián)組件之中,第二層的時(shí)候添加一個(gè)全部按鈕,點(diǎn)擊第二層的全部的時(shí)候,則直接查詢所有板塊的數(shù)據(jù);
- 點(diǎn)擊級(jí)聯(lián)的第三層的時(shí)候,才加載數(shù)據(jù)!
HTML
- groupName :則是需要現(xiàn)實(shí)的 點(diǎn)擊了第二層的全部的時(shí)候,才顯示的!否則的話,走多級(jí)聯(lián)三層選中,顯示效果!
- cascadeValue :級(jí)聯(lián)選中的值
- propsVal : 級(jí)聯(lián)動(dòng)態(tài)加載的配置屬性
- selectChange : 級(jí)聯(lián)選中的時(shí)候觸發(fā)的函數(shù)
- expandChange: 級(jí)聯(lián)展開(kāi)觸發(fā)
目的:點(diǎn)擊級(jí)聯(lián)的時(shí)候,只是在點(diǎn)擊第二層的時(shí)候,獲取到第一層集團(tuán)的選中的值!
<div class="top_pane_select"> ? <div class="group_name" v-if="showGroupName" >{{ groupName }} / 全部</div> ? <el-cascader ? ? ref="cascader" ? ? v-model="cascadeValue" ? ? :props="propsVal" ? ? @change="selectChange" ? ? @expand-change="expandChange" ? ></el-cascader> </div>
js
data() { ? ? return { ? ? ? propsVal: { ? ? ? // 點(diǎn)擊的時(shí)候 觸發(fā) ? ? ? ? expandTrigger: "click", ? ? ? ? // 完整路徑 ? ? ? ? emitPath: true, ? ? ? ? // 動(dòng)態(tài)加載 ? ? ? ? lazy: true, ? ? ? ? // 動(dòng)態(tài)加載的時(shí)候 觸發(fā)渲染dom節(jié)點(diǎn) ? ? ? ? lazyLoad: (node, resolve) => { ? ? ? ? ? this.selectLazyLoad(node, resolve); ? ? ? ? }, ? ? ? }, ? ? ? currentIndustry: [], // 當(dāng)前產(chǎn)業(yè) ? ? ? groupName:"",// 當(dāng)選中為 集團(tuán) + 第二級(jí) 全部的時(shí)候 顯示再級(jí)聯(lián)菜單 ? ? ? firstHomeGroup:[], // 集團(tuán)的數(shù)據(jù) ? ? ? showGroupName:false,? ? ? ? jtCode:"", // 當(dāng)前集團(tuán)選中的code ? ? ? cascadeValue: [], //級(jí)聯(lián)選中的值 ? ? ?} ? } ? watch: { ? ?? ?// 級(jí)聯(lián)選中的值 判斷:當(dāng)選中的值 為空數(shù)組(也就是查詢所以集團(tuán)的數(shù)據(jù)時(shí)候),調(diào)用級(jí)聯(lián)的重置方法! ? ? cascadeValue(newV) { ? ? ? if (newV.length === 0) { ? ? ? ? this.selectReset(); ? ? ? }else{ ? ? ? ? this.groupName = ""; ? ? ? } ? ? }, ? ? // 當(dāng)前選中的產(chǎn)業(yè) 傳遞到子組件的數(shù)據(jù) ? ? currentIndustry(newV){ ? ? ? this.currentIndustry = newV; ? ? ? if(newV.length == 0){ ? ? ? ? this.groupName = ""; ? ? ? ? this.showGroupName = false; ? ? ? } ? ? } ? }, methods: { ?? ?// 創(chuàng)建dom節(jié)點(diǎn) 和 刪除 dom節(jié)點(diǎn) ? ? createDom(dom){ ? ? ? let li = document.createElement("li") ? ? ? li.innerHTML = "全部"; ? ? ? dom.insertBefore(li, dom.children[0]) ? ? ? dom.children[0].style.paddingLeft = "10px"; ? ? ? dom.children[0].style.cursor = "pointer"; ? ? }, ? ? destroyedDom(dom){ ? ? ? dom.removeChild(dom.children[0]) ? ? }, ? ? // 級(jí)聯(lián)選擇器 動(dòng)態(tài)加載數(shù)據(jù) ? ? selectLazyLoad(node, resolve) { ? ? ? const { level } = node; ? ? ? if (level == 0) { ? ? ? ? // 請(qǐng)求集團(tuán)的數(shù)據(jù) ? ? ? ? getHomeGroup().then(({ data }) => { ? ? ? ? ? this.firstHomeGroup ?= data.dat; ? ? ? ? ? this.renderNode(data, level, resolve); ? ? ? ? }); ? ? ? } else if (level == 1) { ? ? ? ? // 請(qǐng)求板塊的數(shù)據(jù) ? ? ? ? let groupNo = node.data ? node.data.value : null; // 拿到選中的第一級(jí)的value ? ? ? ? getHomePlate(groupNo).then(({ data }) => { ? ? ? ? ? this.renderNode(data, level, resolve); ? ? ? ? }); ? ? ? } else if (level == 2) { ? ? ? ? // 請(qǐng)求產(chǎn)業(yè)的數(shù)據(jù) ? ? ? ? let palteNo = node.data ? node.data.value : null; // 拿到選中的第二級(jí)的value ? ? ? ? getHomeIndustry(palteNo).then(({ data }) => { ? ? ? ? ? this.renderNode(data, level, resolve); ? ? ? ? }); ? ? ? } ? ? }, ? ? // 渲染dom節(jié)點(diǎn) 就是拿到后臺(tái)請(qǐng)求的數(shù)據(jù)的時(shí)候,渲染dom節(jié)點(diǎn) ? ? renderNode(data, level, resolve) { ? ? ? if (data.code == 0 && data.dat.length > 0) { ? ? ? ? let nodes = data.dat.map((item) => { ? ? ? ? ? return { ? ? ? ? ? ? value: item.code, ? ? ? ? ? ? label: item.name, ? ? ? ? ? ? leaf: level >= 2, ? ? ? ? ? }; ? ? ? ? }); ? ? ? ? resolve(nodes); ? ? ? ? if( level === 0){ ? ? ? ? ? this.$nextTick(() => { ? ? ? ? ? ? let dom = document.querySelector(".el-cascader-panel > .el-scrollbar:nth-child(1) .el-scrollbar__view") ? ? ? ? ? ? this.createDom(dom); ? ? ? ? ? ? dom.children[0].onclick = () => { ? ? ? ? ? ? ? this.jtCode = ""; ? ? ? ? ? ? ? this.cascadeValue = []; ? ? ? ? ? ? ? this.currentIndustry = []; ? ? ? ? ? ? ? this.selectChange([]); ? ? ? ? ? ? ? this.$refs.cascader.dropDownVisible = false; ? ? ? ? ? ? ? this.selectReset(); ? ? ? ? ? ? } ? ? ? ? ? }) ? ? ? ? } ? ? ? } ? ? }, ? ? // 級(jí)聯(lián)展開(kāi) 只為創(chuàng)建最新的dom節(jié)點(diǎn) ? ? expandChange(item){ ? ? ? // console.log('展開(kāi)item',item); ? ? ? if(item.length === 1){ ? ? ? ? this.$nextTick(() => { ? ? ? ? ? let dom = document.querySelector(".el-cascader-panel > .el-scrollbar:nth-child(2) .el-scrollbar__view"); ? ? ? ? ? if(dom.children[0].innerText == "全部"){ ? ? ? ? ? ? this.destroyedDom(dom); ? ? ? ? ? ? this.createDom(dom); ? ? ? ? ? ? this.groupClick(item); ? ? ? ? ? }else{ ? ? ? ? ? ? this.createDom(dom); ? ? ? ? ? ? this.groupClick(item); ? ? ? ? ? } ? ? ? ? }) ? ? ? } ? ? }, ? ? // 點(diǎn)擊 集團(tuán)的時(shí)候 創(chuàng)建 全部 按鈕 ? ? groupClick(item){ ? ? ? this.$nextTick(() => { ? ? ? ? let dom = document.querySelector(".el-cascader-panel > .el-scrollbar:nth-child(2) .el-scrollbar__view"); ? ? ? ? if(dom.children[0]){ ? ? ? ? ? dom.children[0].onclick = () => { ? ? ? ? ? ? this.jtCode = item[0]; ? ? ? ? ? ? this.currentIndustry = [this.jtCode, ""]; ? ? ? ? ? ? // this.selectChange(this.currentIndustry); ? ? ? ? ? ? this.firstHomeGroup.forEach(item => { ? ? ? ? ? ? ? if(item.code == this.jtCode){ ? ? ? ? ? ? ? ? this.groupName = item.name; ? ? ? ? ? ? ? ? this.showGroupName = true; ? ? ? ? ? ? ? } ? ? ? ? ? ? }) ? ? ? ? ? ? this.selectReset(); ? ? ? ? ? ? this.$refs.cascader.dropDownVisible = false; ? ? ? ? ? } ? ? ? ? } ? ? ? }) ? ? }, ? ? // 級(jí)聯(lián)選中的時(shí)候 對(duì)數(shù)據(jù)的判斷! ? ? selectChange(item) { ? ? ? // console.log("級(jí)聯(lián)選中item", item,item.length); ? ? ? // this.currentIndustry = item[item.length - 1]; ? ? ? if(item.length == 3){ ? ? ? ? this.currentIndustry = item; ? ? ? ? this.showGroupName = false; ? ? ? ? this.groupName = ""; ? ? ? } else { ? ? ? ? if(this.jtCode){ ? ? ? ? ? this.currentIndustry = [this.jtCode,""]; ? ? ? ? }else{ ? ? ? ? ? this.currentIndustry = []; ? ? ? ? } ? ? ? } ? ? }, ? ? // 級(jí)聯(lián)下拉菜單 重置 ? ? selectReset() { ? ? ? const _cascader = this.$refs.cascader; ? ? ? if (_cascader) { ? ? ? ? _cascader.$refs.panel.checkedValue = []; ? ? ? ? _cascader.$refs.panel.activePath = []; ? ? ? ? _cascader.$refs.panel.syncActivePath(); ? ? ? } ? ? ? let dom = document.querySelector(".el-cascader-panel > .el-scrollbar:nth-child(2) .el-scrollbar__view"); ? ? ? if(dom){ ? ? ? ? if(dom.children[0].innerText == "全部" && dom.children[0]){ ? ? ? ? ? dom.removeChild(dom.children[0]) ? ? ? ? } ? ? ? } ? ? }, },
CSS
.top_pane_select { ? ? ? ? ? position: relative; ? ? ? ? ? margin-top: 2px; ? ? ? ? ? margin-left: 115px; ? ? ? ? ? width: 240px; ? ? ? ? ? height: 24px; ? ? ? ? ? border: 1px solid #e82323; ? ? ? ? ? border-radius: 2px; ? ? ? ? ? overflow: hidden; ? ? ? ? ? ::v-deep .el-cascader { ? ? ? ? ? ? top: -8px !important; ? ? ? ? ? ? width: 240px!important; ? ? ? ? ? ? .el-input__inner { ? ? ? ? ? ? ? color: #e82323; ? ? ? ? ? ? ? border: none !important; ? ? ? ? ? ? } ? ? ? ? ? } ? ? ? ? ? // 單獨(dú)選中 集團(tuán)的時(shí)候 顯示 ? ? ? ? ? .group_name{ ? ? ? ? ? ? background: #fff; ? ? ? ? ? ? z-index: 10; ? ? ? ? ? ? position: absolute; ? ? ? ? ? ? top: 2px; ? ? ? ? ? ? left: 15px; ? ? ? ? ? ? width: 40%; ? ? ? ? ? ? height: 22px; ? ? ? ? ? ? line-height: 22px; ? ? ? ? ? ? color: #e82323; ? ? ? ? ? } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹
vue如何簡(jiǎn)單的實(shí)現(xiàn)彈框,遮罩,點(diǎn)擊其他區(qū)域關(guān)閉彈框, 簡(jiǎn)單的思路是以一個(gè)div作為遮罩,這篇文章給大家詳細(xì)介紹了vue實(shí)現(xiàn)彈框遮罩點(diǎn)擊其他區(qū)域彈框關(guān)閉及v-if與v-show的區(qū)別介紹,感興趣的朋友一起看看吧2018-09-09詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子
本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05Vue watch響應(yīng)數(shù)據(jù)實(shí)現(xiàn)方法解析
這篇文章主要介紹了Vue watch響應(yīng)數(shù)據(jù)實(shí)現(xiàn)方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07Vue項(xiàng)目部署到IIS后刷新報(bào)錯(cuò)404的問(wèn)題及解決方法
這篇文章主要介紹了Vue項(xiàng)目部署到IIS后,刷新報(bào)錯(cuò)404,這里需要用到URL重寫工具?--URL?Rewrite,需要的話需要自己下載安裝,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10Element Plus實(shí)現(xiàn)Affix 固釘
本文主要介紹了Element Plus實(shí)現(xiàn)Affix 固釘,Affix組件用于將頁(yè)面元素固定在特定可視區(qū)域,文中通過(guò)示例代碼介紹的非常詳細(xì),感興趣的小伙伴們可以參考一下2021-07-07vue實(shí)現(xiàn)用戶長(zhǎng)時(shí)間不操作自動(dòng)退出登錄功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue實(shí)現(xiàn)用戶長(zhǎng)時(shí)間不操作自動(dòng)退出登錄功能的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07vue與iframe頁(yè)面數(shù)據(jù)互相通信的實(shí)現(xiàn)示例
這篇文章主要給大家介紹了vue與iframe頁(yè)面數(shù)據(jù)互相通信的實(shí)現(xiàn)示例,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12