element树的懒加载另一种方式

shuaijie0518

已于 2022-07-25 17:42:50 修改

阅读量459

点赞数

分类专栏： element vue 文章标签： elementui

于 2022-07-20 16:31:57 首次发布

本文链接：https://blog.youkuaiyun.com/taoqidexiaojie/article/details/125893883

版权

vue 同时被 2 个专栏收录

18 篇文章

订阅专栏

element

8 篇文章

订阅专栏

这篇博客展示了两种在 Vue.js 中实现树形组件加载的方式。第一种是通过 `lazy` 属性进行懒加载，只有在节点展开时才请求子节点数据。第二种方式是在节点打开时立即请求所有子节点数据。两种方法都结合了 `el-tree` 组件和自定义的 `loadNode` 或 `node-open` 方法来处理数据加载，并提供了筛选功能。示例代码中包含了数据获取、节点处理和数据绑定的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在看element时，可以使用load方式进行页面的懒加载，例如：

注意：此代码是从别的项目中筛出来的。复制粘贴有可能有错误。需要自己理解，之后再运用。

<template>
  <div class="thirdContent" style="height: 100%">
    <el-dialog title="设置人员" :modal=false :close-on-click-modal=false :visible.sync="dialogVisible" width="50%">
      <div class="dialog-tree">
        <el-tree
            :data="deptOptions"
            :props="deptProps"
            node-key="id"
            accordion
            lazy
            :load="loadNode"
            highlight-current
            :expand-on-click-node="false"
            ref="jurisdiction"
            :filter-node-method="filterNode"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrganAsyncTree } from '../../../rp/api/relayProtectionSheet'
export default {
  name: "third",
  data() {
    return {
      dialogVisible: false,
      deptOptions: [],
      deptProps: {
        children: "children",
        label: 'text',
        isLeaf: 'isLeaf'
      },
    };
  },
  methods: {
    loadNode(node, resolve) {
      if(node) {
        const param = {
          pid: node.data.id
        }
        getOrganAsyncTree(param).then(res => {
          res = this.setChildren(res.data.data)
          if (res.length > 0) {
            resolve(res)
          }else {
            node.data.children = []
            node.childNodes = []
            resolve(node.childNodes)
          }
        })
      }
    },
    setChildren (val) {
      val.map(res => {
        if (res.childrenCount !== 0) {
          res.children = [{ ID: '', TEXT: '' }]
        }else {
          res.isLeaf = true
        }
      })
      return val
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  }
}
</script>

但是，我还有另一种，不需要进行load进行树的懒加载，当树打开时就去请求他的子树。

当第一次打开对话框的时候，则：

<template>
  <div class="thirdContent" style="height: 100%">
    <el-dialog title="设置人员" :modal=false :close-on-click-modal=false :visible.sync="dialogVisible" width="50%">
        <el-col :span="8" :xs="24" class="el">
          <div class="dialog-tree">
            <el-tree
                :data="deptOptions"
                :props="deptProps"
                node-key="id"
                accordion
                highlight-current
                :expand-on-click-node="false"
                ref="jurisdiction"
                :filter-node-method="filterNode"
                @node-expand="nodeOpen"
            />
          </div>
        </el-col>
    </el-dialog>
  </div>
</template>

<script>
import { getOrganAsyncTree} from '../../../rp/api/relayProtectionSheet'
export default {
  name: "third",
  data() {
    return {
      dialogVisible: false,
      deptOptions: [],
      deptProps: {
        children: "children",
        label: 'text',
        isLeaf: "isLeaf"
      }
    };
  },
  methods: {
    nodeOpen(val, node) {
      const params = {
        pid: val.id
      }
      this.getTree(true, params, node)
    },
    // 获取menu数据
    getTree (flag, param, node) { // flag 的值true false
      getOrganAsyncTree(param).then(res => {
        res = this.setChildren(res.data.data)
        if (flag) { // true 代表请求子节点
          if (res.length > 0) {
            node.data.children = []
            node.childNodes = []
            res.map(tes => {
              this.$refs['jurisdiction'].append(tes, node)
            })
          }
        } else {
          // false 最初始请求
          this.deptOptions = res
        }
      })
    },
    setChildren (val) {
      val.map(res => {
        if (res.childrenCount !== 0) {
          res.children = [{ ID: '', TEXT: '' }]
        }else {
          res.isLeaf = true
        }
      })
      return val
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  }
}
</script>