vue +ant design中树形菜单自定义图标，分段请求子菜单的需求

还是ant design比较强大，最近用了tree的组件，先看实现效果吧

HTML：

  <a-tree
          :autoExpandParent="true"
          defaultExpandAll
          :treeData="treedata"
          showIcon
          class="main-table"
          @select="handleSelected"
          :loadData="onLoadData"
            >
            <img src="../../assets/case_info.png" alt="" slot="case_info" style="width:0.15rem;height:0.15rem;">
            <img src="../../assets/evidence_list.png" alt="" slot="evidence_list" style="width:0.15rem;height:0.15rem;">
            <img src="../../assets/example.png" alt="" slot="null" style="width:0.15rem;height:0.15rem;">
            <img src="../../assets/sim_card_info.png" alt="" slot="sim_card_info" style="width:0.15rem;height:0.15rem;">
            <img src="../../assets/basic_info.png" alt="" slot="basic_info" style="width:0.15rem;height:0.15rem;">
            </a-tree>
          

注意啊，后端给的数据接口要包括slot里面的值，不然没法对应

然后我们请求一次父菜单还有还有请求子菜单

mounted(){
        this.getMenuTree()
  },

methods:{
getMenuTree(){
  this.treedata = []
    getMenuTreeTable({id:this.$route.params.sampleId}).then((res) =>{//树形菜单的动态获取数据
        this.treedata=res.data
    })
},
//在这里加setTimeout可以出现loading的效果哦！！！！
onLoadData(treeNode){  //对应组件中 :loadData="onLoadData"来进行请求子菜单
  const _this = this
  return new Promise((resolve) =>{
    if(treeNode.dataRef.children) {
      resolve()  //有了值就会直接渲染
      return 
    }
    let param = {datasetCollectInfoId:this.$route.params.sampleId,pid:treeNode.dataRef.key}
    getChildrenId(param).then((res) =>{   //子菜单的数据接口
      if(res.code== 20000){
        treeNode.dataRef.children = res.data
        _this.treedata = [..._this.treedata]
      }
    })
    resolve()
  })
},

然后我们点击每一个菜单，然后拿到数据传给右侧表格显示，这里需要的是组件中 @select="handleSelected"
methods中写：

   handleSelected(keys, info) {  //点击树形菜单每一列菜单
      console.log("点击文字:", info.node.dataRef.datasetCollectInfoId);
      this.metaTableId = info.node.dataRef.metaTableId
      this.LeafNode = info.node.dataRef.children 
    },

info.node.dataRef 中我们可以拿到到树形菜单每一项的所有值，取到我们想要的值进行传递，这里取到的是id，然后用
watch去监听metaTableId拿取到值去响应表格内容

嘿嘿，要是觉得每次加载树形菜单时间太长，需要加一个loading的效果，可以给个定时器去设置，在加载子菜单的数据的地方

每次学到新东西，及时去整理，发现，拓展，思考，就会发现其实也不是很难的。