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

Posted 2023-02-22 瀚岳-诸葛弩

先上效果图：

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调用