elementui中使用el-tree控件懶加載和局部刷新
使用el-tree控件懶加載和局部刷新
懶加載
按照 elementui官方文檔示例,效果圖
template部分,需要結合 lazy 和 load 一起使用
<el-tree show-checkbox node-key="id" lazy :load="loadNode" :props="defaultProps" v-loading="list.loading" ref="tree"> </el-tree>
js 部分
export default { data () { return { list: { loading: false, isExpand: false }, defaultProps: { // tree 控件的數據結構,需要設置 isLeaf children: 'children', label: 'name', isLeaf: 'leaf' }, loading:false } }, methods: { async loadNode(node, resolve) { // 懶加載 if (node.level === 0) { return resolve(await this.getTagList()) } else if (node.level === 1) { return resolve(await this.getTagApiList(node.label)) } else { return resolve([]) // 防止該節點沒有子節點時一直轉圈的問題出現 } }, async getTagList () { // 獲取所有接口所屬模塊 -> 第一層 this.list.loading = true const res = await this.$API({ name: 'getApiTagList', requireAuth: true }) const tags = res.data.data tags.forEach((item, index) => { // 節點需要構建為 tree 的結構 item.name = item.ta item.id = index item.leaf = false }) this.list.loading = false return tags }, async getTagApiList (tag) { // 查詢模塊下的接口列表 -> 第二層 const res = await this.$API({ name: 'getTagApiList', data: { tag }, requireAuth: true }) const results = res.data.data results.forEach(item => { item.name item.id item.leaf = true }) return results }, } }
局部刷新
想要實現的效果是,新增節點,點擊確定後局部刷新,渲染新數據
效果圖
關鍵代碼
<el-tree node-key="id" lazy :load="loadNode" :props="defaultProps" :expand-on-click-node="false" :check-on-click-node="true" v-loading="list.loading" @node-click="nodeClick" ref="tree"> </el-tree>
// 點擊節點,把 node 保存下來,供局部刷新中的 node 使用 nodeClick (data, node) { this.curPath = data.path this.curNode = node }, // 實現局部刷新,在點擊彈窗處調用的 partialRefreshpartialRefresh (node) { node.loaded = false // 設置loaded為false;模擬一次節點展開事件,加載重命名後的新數據; node.expand() // 新建子節點是刷新一次本節點的展開請求,而重命名和刪除則需要刷新父級節點的的展開事件,可以設置node.parent.loaded = false;node.parent.expand(); }
element-ui el-tree lazy懶加載局部刷新的問題
在項目開發中,使用el-tree 進行懶加載的時候,如果遇到需要進行添加 刪除操作的時候,整體刷新數據體驗會很不好,所以需要局部進行刷新,
我們可以通過找到樹節點的形式,對當前展開的節點進行重新打開請求一次,以此來獲取最新數據
<el-tree lazy ref="tree" :load="loadNode" :node-key="id" > </el-tree>
methods: { refreshNodeBy(id){ let node = this.$refs.tree.getNode(id); // 通過節點id找到對應樹節點對象 node.loaded = false; node.expand(); // 主動調用展開節點方法,重新查詢該節點下的所有子節點 } }
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- el-tree loadNode懶加載的實現
- element tree懶加載:load="loadNode"隻觸發一次的解決方案
- vue中的el-tree @node-click傳自定義參數
- Vue使用el-tree 懶加載進行增刪改查功能的實現
- element-ui tree 手動展開功能實現(異步樹也可以)