vue3+TS+elementplus记录element-plus 树形控件懒加载树

最新推荐文章于 2024-07-25 14:40:29 发布

什么意思哦学不懂

最新推荐文章于 2024-07-25 14:40:29 发布

阅读量3.6k

点赞数 3

文章标签： python 开发语言

本文链接：https://blog.csdn.net/lzzxy0914/article/details/123521177

版权

本文介绍了如何在Vue3项目中结合TypeScript和ElementPlus库，实现树形控件的懒加载功能。关键在于设置`lazy`属性并提供`load`方法，该方法接收当前节点和用于处理数据的`resolve`函数作为参数，实现动态加载子节点。

摘要由CSDN通过智能技术生成

记录一下懒加载传数据

树形组件懒加载需要添加lazy属性，load方法才会生效

load属性需要传入一个该树形节点加载时所调用的函数

load函数接收两个参数，一个是node,即当前节点，一个是resolve作为数据处理函数

<template>
  <el-row>
    <el-col :span="9">
      <div class="tree">
        <el-scrollbar>
          <div class="filter">
            <el-input
              v-model="filterText"
              placeholder="输入关键字进行过滤"
              size="small"
            />
          </div>
          <el-tree
            ref="treeRef"
            :data="data"
            :props="props"
            lazy
            :load="loadNode"
            node-key="id"
            @node-click="getCurrentNode"
            :filter-node-method="filterNode"
          />
        </el-scrollbar>
      </div>
    </el-col>
    <el-col :span="15">
      <div class="region">
        <div class="region-button">
          <div class="button">
            <el-button-group>
              <el-button size="mini" type="primary" @click="addchildren">
                <el-icon><circle-plus /></el-icon>新增下级</el-button
              >
              <el-button size="mini" type="primary" @click="regionDelete"
                ><el-icon><delete /></el-icon>删除</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="dialogVisible = true"
                ><el-icon><upload /></el-icon>导入</el-button
              >
              <el-button size="mini" type="primary"
                ><el-icon><download /></el-icon>导出</el-button
              >
            </el-button-group>
          </div>
        </div>
        <div class="region-body">
          <div class="body">
            <el-form
              ref="formRef"
              :model="form"
              label-width="120px"
              :rules="regionRules"
            >
              <el-form-item label="父区划编号:" prop="parentCode">
                <el-input
                  v-model="form.parentCode"
                  placeholder="请输入 父区划编号"
                  :disabled="true"
                  size="small"
                ></el-input>
              </el-form-item>
              <el-form-item label="父区划名称:" prop="parentName">
                <el-input