lazy-tree（懒加载树）

• 重要说明：懒加载树组件用于超大数据量的树形结构数据展示，目前只支持节点单选，使用此组件时，需要后端提供相关的接口，返回平级结构的数据，然后根据点击的节点，再返回下一级节点的数据。（特别注意：如果涉及到关键字搜索，需要接口提供支持，即输入关键字之后，返回包含关键字的所有节点数据，如果要按照树结构展示，还需要返回包含关键字节点的祖父节点数据）

基础用法

示例：

代码示例：

<!-- 懒加载树组件示例 -->
<template>
  <!-- 容器 -->
  <div class="main">
    <!-- 内容区域 -->
    <div class="content">
      <el-input size="small" v-model="keyword" placeholder="输入关键字" style="width: 85%;" />
      <el-button size="small" type="primary" @click="onSearch" style="margin-left: 10px;">查询</el-button>
      <!-- 懒加载树 -->
      <v-lazy-tree ref="layTree" :load="load" :containerHeight="450" />
    </div>
  </div>
</template>
<script>
import fetch from '@/config/fetch';
import util from '@/assets/js/util';

export default {
  data() {
    return {
      keyword: '', //关键字
    };
  },
  methods: {
    /**
     * 加载方法
     */
    load(node = {}, resolve) {
      let { code = '' } = node;
      fetch
        .get('/pex/travelGraph/getCityData', {
          params: {
            cityKeys: code,
            fiscal: '2022',
            agyCode: '110112110',
            mofDivCode: '87',
            keyword: this.keyword,
          },
        })
        .then(({ data }) => {
          data = data.map((e) => {
            return _.pick(e, ['code', 'name', 'pcode', 'disabled']);
          });
          return resolve(data);
        })
        .catch((err) => {
          console.error(err);
          this.$message({
            type: 'error',
            message: err.msg,
          });
          return resolve([]);
        });
    },
    /**
     * 处理查询
     */
    onSearch() {
      if (util.isEmpty(this.keyword)) {
        this.$refs.layTree.init();
      } else {
        this.$refs.layTree.filter();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import '~@/assets/style/variables.scss';
.main {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    height: 500px;
    width: 600px;
    padding: 10px;
    background-color: $-bs-bg-white;
  }
}
</style>

属性：

参数	说明	类型	可选值	默认值
containerHeight	树组件高度	Number	-	700
load	加载方法	Function	-	(node, resolve) => {}
display	节点显示类型	String	'CODE'，'NAME'，'CODE_NAME'	'NAME'
props	展示数据结构	Object	-	{
id: 'code',
label: 'name',
pid: 'pcode',
disabled: 'disabled',
leaf: 'leaf',
}

事件：

事件名	说明	参数	参数说明
node-collapse	节点收起事件	omitOption	-
node-expand	节点展开事件	omitOption	-
node-click	节点点击事件	omitOption	-

方法：

方法名	说明	参数	参数说明
updateNodeValue	更新节点数据	nodeId, value = {}	-
getCheckedNodes	获取当前选中节点的节点信息	-	-
getCheckedKeys	获取当前选中节点对应的key值	-	-
expendByCodeList	通过编码数组展开树	expendCodeList	展开编码集合 [0,01,0101]

插槽：

插槽名称	说明	参数
default	自定义树节点的内容	node