如何隱藏element-ui中tree懶加載葉子節(jié)點checkbox(分頁懶加載效果)
根據(jù)最新的工作需求中指示,要求Tree樹組件為lazy懶加載,且能夠進行復(fù)選框選擇,這個實現(xiàn)簡單,設(shè)置show-checkbox即可,若此處要求葉子節(jié)點也不能包含復(fù)選框,就有些困擾了
1.首先按照官網(wǎng)
拷貝tree樹組件代碼,設(shè)置完show-checkbox,圖中查看更多為葉子節(jié)點,且設(shè)置數(shù)據(jù)節(jié)點屬性為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é)點 --> <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é)點不會有加載目錄符號,但此時,有個禁用復(fù)選框,現(xiàn)在只需要對它設(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. 分頁懶加載實現(xiàn)功能也比較簡單
可以復(fù)寫tree樹自帶的load方法,load方法內(nèi)攜帶兩個返回參數(shù),一個是node,一個是resolve,即懶加載數(shù)據(jù)必須是通過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é)點各自的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; }); // 判斷獲取分頁查詢的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}; }); // 翻頁信息添加 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); } }, // 查看更多事件點擊 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)有一點需要注意,即每次查詢接口的時候,和后臺約定的規(guī)則是:不包含分頁,需要傳值兩個參數(shù),一個是parent,即當前節(jié)點的上一級所有層級拼接,另一個是pre即當前節(jié)點的子集,若第一次加載,pre可為空,若查看更多再一次加載pre為上一次加載數(shù)據(jù)data的最后一個元素id,作為傳參;
eg:
- a、此時需要點擊加載js,即 GET請求下param參數(shù)如下parent=172.24.114.143:8080/js&pre=
- b、此時繼續(xù)點擊查看更多,則傳入parent=172.24.114.143:8080/js&pre=jquery-showloading
到此代碼和效果都正常了~
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue2中的keep-alive使用總結(jié)及注意事項
vue2.0提供了一個keep-alive組件用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗。本文給大家介紹vue2中的keep-alive使用總結(jié)及注意事項,需要的朋友參考下吧2017-12-12element-ui中el-cascader動態(tài)加載和默認值詳解
vue+elementUI項目中el-cascader級聯(lián)選擇器使用頻率非常高,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-cascader動態(tài)加載和默認值的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05關(guān)于vue中@click.native.prevent的說明
這篇文章主要介紹了關(guān)于vue中@click.native.prevent的說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-03-03vue3獲取ref實例結(jié)合ts的InstanceType問題
這篇文章主要介紹了vue3獲取ref實例結(jié)合ts的InstanceType問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03