在JEECG-boot代码生成的基础上修改list页面(结合自定义的组件)

先上效果图：

1、在后端创建接口，获取树节点。测试通过后即可。

2、创建前端组件

两个method的全部代码为：

methods: {
  onLoadData(selectedNode) {
    let that = this

    let pid = 0
    if (selectedNode != null) {
      pid = selectedNode.dataRef.id
    }

    let params = new Object()
    params.pid = pid

    return new Promise(resolve => {
      getAction("/jeecg-product/dict.device_catalog/dictDeviceCatalog/queryByPid", params).then(function(res) {
        res.forEach(function(catalog){

          let node = new Object()

          node.key = catalog.id
          node.title = catalog.deviceCatalog
          node.isLeaf = (catalog.hasChild == 1?false:true);
          node.id = catalog.id
          node.pid = params.pid
          node.icon = "gold"
          node.children=[]
          debugger
          if(selectedNode != null){
            node.path = selectedNode.dataRef.title + "-" + node.title
          }
          else{
            node.path = node.title
          }
          if(selectedNode == null){
            that.treeData.push(node)
          }
          else{
            selectedNode.dataRef.children.push(node)
          }

          // that.allTreeNodes.push(node)
        })
      })
      resolve();
    })


  },
  onSelectNode(nodeId, e){
    let param = new Object();
    param.node = e.node.dataRef
    param.id = e.node.dataRef.key
    param.path = e.node.dataRef.path
    param.title = e.node.dataRef.title
    this.$emit("SelectNode",param)
  }
},

需要注意的是ant-design-vue中，树控件的节点只有key，title，children，isleaf为强制要求（即：根据这些属性生成树），在使用的时候可以通过dataRef获取相对应的自行构建的节点对象。

自定义组件事件：

3、前端vue调用