el-tree实现懒加载，同时获取节点对应的数据并展示

---

前言

记录一个简单的功能：el-tree懒加载。
点击树节点，加载下一级目录，同时调用接口展示该节点中的数据。
做完的效果大概是这样：

这里记录一下处理方法。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、界面样式

<el-row>
	// 左侧树形结构
	<el-col :span="5">
        <el-tree :data="treeData" :props="defaultProps"
          :load="loadNode" lazy class="left-menu"
          @check-change="handleCheckChange" @node-click="handleGetTableList" >
        </el-tree>
	</el-col>
	// 右侧表格数据
	<el-col :span="19">
          <div slot="head" class="head-form">
            <el-form :inline="true">
              <el-form-item label="名称：" class="no-margin-bottom">
                <el-input v-model="form.name" placeholder="请输入" clearable @clear="handleGetSearchList()"/>
              </el-form-item>
              <el-form-item class="no-margin-bottom">
                <el-button size="mini" type="primary" @click="handleGetSearchList()"
                  >搜索</el-button
                >
              </el-form-item>
              <el-form-item label="范围：" class="no-margin-bottom">
                <el-radio-group v-model="catalogType" @input="getCatalogType">
                  <el-radio :label="1">当前目录</el-radio>
                  <el-radio :label="2">所有目录</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item style="position:absolute; right: 10px">
                <el-button icon="el-icon-close" @click="beforeClose"></el-button>
              </el-form-item>
            </el-form>
          </div>
          <div slot="content">
            <el-table ref="multipleTable" v-scrollBar="'ScrollBarFlage'"
              :data="tableData" class="table-warp"
              highlight-current-row height="calc(100% - 30px)"
              v-loading.fullscreen.lock="loading"
              :element-loading-background="constType.RGBA"
              :element-loading-text="constType.LOADINGTEXT"
              @selection-change="handleSelectionChange">
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="类型" width="50px">
                <template slot-scope="scope">
                  <img v-if="scope.row.leaf"
src="https://opxr.oppeinsoft.com/Content/images/folder.png"
                  />
                </template>
              </el-table-column>
              <el-table-column label="方案" prop="name"> </el-table-column>
              <el-table-column label="图片">
                <template slot-scope="scope">
                  <el-image style="width: 100px; height: 100px" 
                    :src="scope.row.url"
                    :preview-src-list="[scope.row.url]">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column label="文件目录" prop="catalogname" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <img src="http://opxr.oppeinsoft.com/Content/images/02_60.png" alt=""
                    @click="handleFunc(scope.row)"
                  />
                </template>
              </el-table-column>
            </el-table>
            <div>
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="pageNum"
                layout="total, prev, pager, next, jumper"
                :total="total"
                :page-size="pageSize"
              >
              </el-pagination>
            </div>
          </div>
	</el-col>
</el-row>

在上面代码中，画面被标签分成了左右两部分。
左侧是本篇文章的主角：树状结构的懒加载功能。

<el-tree :data="treeData" :props="defaultProps"
          :load="loadNode" lazy class="left-menu"
          @node-click="handleGetTableList" >
</el-tree>

• treeData定义了树状结构绑定的数据；
• defaultProps用来配置树状结构的ID，Name等属性；
• load和lazy是成对出现的，这两个属性代表对树结构应用懒加载；
• node-click用来监听树状结构的点击动作，加载右侧节点对应的表格数据。

二、方法实现

export default {
  name: 'editPromotion',
  props: {
    editPromotionShow: { type: Boolean, default: false }
  },
  data() {
    return {
      title: "",
	  form: {},
	  uid: "",
	  pageNum: 1,
	  pageSize: 10,
	  total: 0,
	  tableData: [],
	  keyWord: "",
	  loading: false,
	  resourcesEditShow: false,
	  rowData: {},
	  treeList: {},
	  bindLabel: [],
	  editNormsShow: false,
	  treeData: [
	    {
	      name: "厨电厨配",
	      id: "c6bb2334-55f1-4059-a8d6-92f3df273613"
	    }
	  ],
	  defaultProps: {
	    children: "children",
	    label: "name"
	  },
	  checkedNode: "",
	  catalogType: 2,
	  dialogVisible: false,
	  curSelectTable: []
    }
  },
  watch: {},
  mounted() {
  	// 初始状态获取右侧表格数据
    this.getSearchList();
  },
  methods: {
  	// 此方法对应树结构的懒加载功能，点击节点时，会判断是否是根节点
    loadNode(node, resolve) {
    	// 如果是根节点，不用调用接口，直接赋值
	    if (node.level === 0) {
	      return resolve(this.treeData);
	    }
	    // 如果不是根节点，调用接口，获取该节点下的子节点
	    this.handleClickNode(node.data, resolve)
	  },
	  // 根据传入的父节点ID，获取子节点数据，使用resolve加到当前节点下
	  handleClickNode(data, resolve) {
	    this.checkedNode = data;
	    // 设置选中【当前目录】
	    this.catalogType = 1
	    this.getResourceMenuList(data.id, resolve);
	  },
	  // 点击节点，获取表格数据
	  handleGetTableList(data) {
	    this.checkedNode = data;
	    this.catalogType = 1
	    // 判断是否是末端节点，如果是，则调用接口获取节点对应的数据
	    if (data.leaf) {
	      this.getSearchList(data.id);
	    }
	  },
	  // 分页点击事件
	  handleCurrentChange(val) {
	    this.pageNum = val;
	    if (this.catalogType == 1) {
	      this.getSearchList(this.checkedNode.id);
	    } else {
	      this.getSearchList();
	    }
	  },
	  // 获取左侧列表的下级目录
	  async getResourceMenuList(id, resolve) {
	    this.loading = true;
	    let params = {
	      parentCode: id,
	      current: this.pageNum,
	      size: this.pageSize
	    };
	    await request("getResourceMenuList", params)
	      .then(res => {
	        if (res && res.code === 0) {
	          if (res.data.records.length > 0) {
	            resolve(res.data.records)
	          } else {
	            resolve([])
	          }
	        } else {
	          resolve([])
	        }
	      })
	      .finally(err => {
	        this.loading = false;
	      });
	  },
	  // 调用搜索接口
	  getSearchList(id) {
	    this.loading = true;
	    let params = {
	      zyType: id ? id : "",
	      keyword: this.form.name ? this.form.name.trim() : null,
	      current: this.pageNum,
	      size: this.pageSize
	    };
	    request("getResourceManageList", params)
	      .then(res => {
	        if (res && res.code === 0) {
	          let { data } = res;
	          this.tableData = data.records;
	          this.total = data.total;
	        }
	      })
	      .finally(err => {
	        this.loading = false;
	      });
	  },
	  // 根据搜索输入框中的内容，查询对应节点的数据
	  handleGetSearchList() {
	    this.pageNum = 1;
	    this.pageSize = 10;
	    if (this.catalogType == 2) {
	      this.getSearchList()
	    } else {
	      this.getSearchList(this.checkedNode.id);
	    }
	  },
	  // 记录右侧表格中选中的行数据
	  handleSelectionChange(value) {
	    this.curSelectTable = value.map(item => {
	      return {
	        productDirId: this.$parent.curEditRowId,
	        zyname: item.name,
	        zyid: item.id,
	        image: item.url,
	        catalogName: item.catalogname,
	        zytypeid: item.zytypeid
	      }
	    })
	  },
	  // 监听【当前目录】和【所有目录】的切换
	  getCatalogType(value) {
	    this.pageNum = 1;
	    // 如果选中【所有目录】，则不传过滤参数，直接获取全部数据
	    if (value === 2) {
	      this.getSearchList()
	      // 如果选中【当前目录】，则传入当前节点的ID，获取指定数据
	    } else {
	      this.getSearchList(this.checkedNode.id);
	    }
	  }
  }
}
</script>

总结

记录一下，方便以后使用。