element tree点击动态请求数据

element tree点击动态请求数据

用element 做树结构的时候发现如果要一次性加载所有数据 会很卡，所以就想点击一级菜单加载，我们的最多只有二级，所以我判断是只有二级。如果需要子节点，一定要让后端传children哦
template

   <el-tree  node-key="id" :data="dataList" icon-class="el-icon-arrow-right" lazy :props="defaultProps" @node-click="handleNodeClick"></el-tree>

加lazy是为了让树图有个箭头的标志
js

  data() {
    return {
    dataList: [],
          defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      },
    }}
点击加载的方法，里面我这个项目比较大，所以只有截取相关的部分
        handleNodeClick(data) {
      console.log(data)

//判断有children并且children为空
      if (data.children && data.children.length === 0) {
      //这里是我做了一个转圈的loading动画，不需要可以去掉
        const loadingInstance = Loading.service({
          target: '#dashboard-container',
          fullscreen: 'true',
          background: 'rgba(255, 255, 255, 0.3)'
        })
        //后端 所需要的数据 
        sqlfield({ data: { platform_tag: this.searchData.platform_tag, type: this.searchData.type, table: data.label }}).then(
          response => {
            data.children = response.data
            //因为我们只有二级，所以我已经让第二级不用去请求，直接去掉那个三角icon
            data.children.forEach(function(value, i) {
              value.leaf = true
            })
            loadingInstance.close()
          })
          .catch(() => {
            loadingInstance.close()
          })
        // this.treeData[data.$treeNodeId - 1].children = treeData1
        // data.children = this.treeData1[0].children
      }
    },
    这里后端给我的数据是
    {"code":200,"msg":"成功","data":[{"label":"log_ym | bigint | ????"},{"label":"ip | varchar | ip"},{"label":"province | varchar | ??"},{"label":"city_name | varchar | ??"}]}
这只是点击加载的判断，，

下面是一开始进来请求的判断

        chnageTable() {
      const loadingInstance = Loading.service({
        target: '#dashboard-container',
        fullscreen: 'true',
        background: 'rgba(255, 255, 255, 0.3)'
      })
      sqltable({ data: { platform_tag: this.searchData.platform_tag, type: this.searchData.type }}).then(
        response => {
          this.dataList = response.data
          loadingInstance.close()
        })
        .catch(() => {
          loadingInstance.close()
        })
    },
    这个时候后端给的数据是这样的
    {"code":200,"msg":"成功","data":[{"label":"mtj_activation","children":[]},{"label":"mtj_zuanshi_gain","children":[]},{"label":"mtj_zuanshi_use","children":[]},{"label":"test","children":[]}]}