el-tree实现懒加载

一、懒加载树结构

复制代码
<div class="hello" id="container">
    <el-tree
      ref="tree"
      node-key="id"
      :default-expanded-keys="[2]"
      current-node-key="2"
      :props="defaultProps"
      :check-strictly="true"
      @node-click="getChecked"
      @check="handleCheck"
      highlight-current
      :load="loadNode"
      lazy
    >
    </el-tree>
 </div>

data() {
   defaultProps: {
      // children: 'children',
      label: 'label',
       isLeaf: 'leaf'
    }
},
methods: {
    loadNode(node, resolve) {
      console.log('level:=====', node.level)
      if (node.level === 0) {
        return resolve([
          { id: 1, label: 'region' },
          { id: 2, label: 'region2' }
        ])
      }
      if (node.level > 1) return resolve([])

      setTimeout(() => {
        const data = [
          {
            id: 3,
            label: '一级 3',
            leaf: true
          },
          {
            id: 4,
            label: 'zone'
          }
        ]

        resolve(data)
      }, 500)
    }
}

二、懒加载并做数据回显

复制代码
<el-tree
      ref="tree"
      node-key="id"
      current-node-key="2"
      :props="defaultProps"
      :check-strictly="true"
      :show-checkbox="showCheckbox"
      :default-expanded-keys="allSelectOptions"  
      :default-checked-keys="remainIds"
      @node-click="getChecked"
      @check="handleCheck"
      highlight-current
      :load="loadNode"
      lazy
    >
 </el-tree>
// allSelectOptions--默认展开节点得key数组
// remainIds--默认选中key
// 1、defaultExpandAll 不可设置为默认展开,根据回显时,设置的default-expanded-keys?,
// 若设置默认展开值,则只加载第一次,剩下走el-tree自带的懒加载;
// 若未设置展开值,则首次需要全加载出来
data() {
    return {
      defaultProps: {
        // children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      },
      remainIds: [3],
      allSelectOptions: [1]
    }
  }
相关推荐
梵得儿SHI12 分钟前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
Glommer32 分钟前
某音 Js 逆向思路
javascript·逆向
街尾杂货店&36 分钟前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈37 分钟前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api
kevlin_coder2 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生2 小时前
JS 性能优化
前端·javascript
peachSoda72 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
hbqjzx2 小时前
记录一个自动学习的脚本开发过程
开发语言·javascript·学习
浪裡遊2 小时前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
fruge2 小时前
Vue 3 完全指南:响应式原理、组合式 API 与实战优化
javascript·vue.js·ecmascript