如何隱藏element-ui中tree懶加載葉子節(jié)點(diǎn)checkbox(分頁(yè)懶加載效果)
根據(jù)最新的工作需求中指示,要求Tree樹(shù)組件為lazy懶加載,且能夠進(jìn)行復(fù)選框選擇,這個(gè)實(shí)現(xiàn)簡(jiǎn)單,設(shè)置show-checkbox即可,若此處要求葉子節(jié)點(diǎn)也不能包含復(fù)選框,就有些困擾了
1.首先按照官網(wǎng)
拷貝tree樹(shù)組件代碼,設(shè)置完show-checkbox,圖中查看更多為葉子節(jié)點(diǎn),且設(shè)置數(shù)據(jù)節(jié)點(diǎn)屬性為disabled
<el-tree ref="treeRef" class="treeDom" lazy show-checkbox :props="defaultProps" highlight-current="true" :load="lazyLoadMore" :expand-on-click-node="false" :default-expanded-keys="defaultExpandKeys" :default-checked-keys="defaultCheckedKeys" node-key="id" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" @node-click="handleNodeClick" @check="handleCheck" > <div slot-scope="{ node, data }" class="custom-tree-node"> <!-- 查看更多 --> <span v-if="data.id ==='loadmore'" class="tree-node loadmore" @click="loadMoreNode(node,data)" > <el-link>{{ node.label }}</el-link> </span> <!-- 數(shù)據(jù)到底了 --> <span v-if="data.id ==='disabledload'" class="tree-node no-data" style="color: #999; cursor: auto;" > {{ node.label }} </span> <!-- 普通節(jié)點(diǎn) --> <el-tooltip class="item" effect="light" placement="right-start" > <div slot="content" style="max-width: 300px;"> {{ node.label }} </div> <span v-if="data.id !=='loadmore' && data.id!=='disabledload'" class="span-tree-node" @click="loadMoreNode(node,data)">{{ node.label }}</span> </el-tooltip> </div> </el-tree>
css樣式如下:
::v-deep .span-tree-node { width: 120px; position: absolute; text-overflow: ellipsis; overflow: hidden; color: #696969; top: 50%; transform: translateY(-50%); } ::v-deep .treeDom { width: 100%; overflow-x: auto; .custom-tree-node { width: 100% !important; position: relative; }
2.由于屬性是isleaf
所以lazy狀態(tài)下葉子節(jié)點(diǎn)不會(huì)有加載目錄符號(hào),但此時(shí),有個(gè)禁用復(fù)選框,現(xiàn)在只需要對(duì)它設(shè)置樣式即可
::v-deep .el-tree .el-tree-node:last-child { .el-tree-node__content .is-leaf +.el-checkbox.is-disabled{ display: none; } .el-tree-node__content.is-not-clickable{ cursor: pointer; } }
3. 分頁(yè)懶加載實(shí)現(xiàn)功能也比較簡(jiǎn)單
可以復(fù)寫(xiě)tree樹(shù)自帶的load方法,load方法內(nèi)攜帶兩個(gè)返回參數(shù),一個(gè)是node,一個(gè)是resolve,即懶加載數(shù)據(jù)必須是通過(guò)resolve就是return 將數(shù)據(jù)帶回
async lazyLoadMore(node, resolve, parentNode = []) { let id = node?.data?.id, pre = node?.data?.name, data = [], arrId = ''; if (node.level === 0) { id = this.paramNode.parent; return resolve([{id: id, name: id, leaf: false}]); } if (node.level === 1) { pre = ''; } // 節(jié)點(diǎn)各自的resolve this.funcResolve.push({id: id, resolve: resolve}); this.funcResolve = this.funcResolve.filter((item, index, self)=>{ return self.findIndex(x=>x.id === item.id) === index; }); // 判斷獲取分頁(yè)查詢的pre參數(shù) if (id && id.indexOf('/') > -1) { let arrIndex = id.lastIndexOf('/') + 1; arrId = id.substring(arrIndex); if (arrId === pre) pre = ''; } // lazy加載查詢接口 const { data: {items} } = await getInterfaceTreeDictory({parent: id || '', pre: pre || ''}); data = items.map(({interface_url: name, full_interface_url: id}) => { return {name, id}; }); // 翻頁(yè)信息添加 if (data.length >= this.pageSize) { let nearName = data[data.length - 1].name; data.push({name: '查看更多', id: 'loadmore', nearName: nearName, leaf: true, disabled: true}); } // 查看更多加載需根據(jù)各自的resolve加載數(shù)組數(shù)據(jù) if (parentNode && parentNode.length > 0) { parentNode.push(...data); return resolve(parentNode); } else { return resolve(data); } }, // 查看更多事件點(diǎn)擊 loadMoreNode(node, data) { if (data.id === 'loadmore') { let nodeParentKey = node.parent.key ? node.parent.key : this.paramNode.parent; let childNode = { data: { id: nodeParentKey, name: data.nearName } }, resolve = ''; let parentNode = node.parent.childNodes.map(({key: id, label: name})=>{ return { name, id }; }); console.log(parentNode); // 剔除自定義查看更多option數(shù)據(jù) if (parentNode.length > 0) { parentNode = parentNode.slice(0, -1); } // 選取resolve返回 if (parentNode.length <= this.pageSize) { resolve = this.funcResolve.filter((item)=>{ return item.id === nodeParentKey; }); // 調(diào)用原生Tree load方法 this.$refs.treeRef.load(childNode, resolve[0].resolve, parentNode); } } },
代碼內(nèi)有一點(diǎn)需要注意,即每次查詢接口的時(shí)候,和后臺(tái)約定的規(guī)則是:不包含分頁(yè),需要傳值兩個(gè)參數(shù),一個(gè)是parent,即當(dāng)前節(jié)點(diǎn)的上一級(jí)所有層級(jí)拼接,另一個(gè)是pre即當(dāng)前節(jié)點(diǎn)的子集,若第一次加載,pre可為空,若查看更多再一次加載pre為上一次加載數(shù)據(jù)data的最后一個(gè)元素id,作為傳參;
eg:
- a、此時(shí)需要點(diǎn)擊加載js,即 GET請(qǐng)求下param參數(shù)如下parent=172.24.114.143:8080/js&pre=
- b、此時(shí)繼續(xù)點(diǎn)擊查看更多,則傳入parent=172.24.114.143:8080/js&pre=jquery-showloading
到此代碼和效果都正常了~
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中
- vue elementUI tree樹(shù)形控件獲取父節(jié)點(diǎn)ID的實(shí)例
- elementUI如何動(dòng)態(tài)給el-tree添加子節(jié)點(diǎn)數(shù)據(jù)children詳解
- Element ui tree(樹(shù))實(shí)現(xiàn)父節(jié)點(diǎn)選中時(shí)子節(jié)點(diǎn)不選中父節(jié)點(diǎn)取消時(shí)子節(jié)點(diǎn)自動(dòng)取消功能
相關(guān)文章
vue如何實(shí)現(xiàn)表單多選并且獲取其中的值
這篇文章主要介紹了vue如何實(shí)現(xiàn)表單多選并且獲取其中的值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07vue2中的keep-alive使用總結(jié)及注意事項(xiàng)
vue2.0提供了一個(gè)keep-alive組件用來(lái)緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗。本文給大家介紹vue2中的keep-alive使用總結(jié)及注意事項(xiàng),需要的朋友參考下吧2017-12-12element-ui中el-cascader動(dòng)態(tài)加載和默認(rèn)值詳解
vue+elementUI項(xiàng)目中el-cascader級(jí)聯(lián)選擇器使用頻率非常高,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-cascader動(dòng)態(tài)加載和默認(rèn)值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05關(guān)于vue中@click.native.prevent的說(shuō)明
這篇文章主要介紹了關(guān)于vue中@click.native.prevent的說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vue自定義過(guò)濾器創(chuàng)建和使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue自定義過(guò)濾器創(chuàng)建和使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11vue使用echarts詞云圖的實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于vue使用echarts詞云圖的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05vue3獲取ref實(shí)例結(jié)合ts的InstanceType問(wèn)題
這篇文章主要介紹了vue3獲取ref實(shí)例結(jié)合ts的InstanceType問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03vue使用transition組件動(dòng)畫(huà)效果的實(shí)例代碼
這篇文章主要介紹了vue使用transition組件動(dòng)畫(huà)效果的實(shí)例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01