基于JEECG-BOOT制作“左树右表”交互页面

前置知识：

1、ant-design-vue

2、vue的slot概念

需求效果：

如上界面所示。

后端不改动，基于jeecg-boot生成的代码，前端自定义，分为左右两块，典型的“左树右表”结构。实现目的：

1、左边树结构从两张表生成，并封装成控件，方便后期重复调用；

2、右边列表，默认展示点击的叶子节点的关联数据，点击保存后，保存最终结果；

3、通过ant-design-vue统一UI风格

具体开发：

1、树控件的封装

（1）后端代码：从数据库取出要生成的树结构的节点数据；

首先，定义树结构属性。此处，定义了一个通用类，按照jeecg-boot推荐，按规范建立目录和文件

（2）构建后端节点生成代码

（3）构建前端代码，封装成控件

script下的代码比较简单，直接看代码。

import { getAction } from '@api/manage'

export default {
  name: 'DictDeviceTypeTree',
  data() {
    return {
      treeData: [],
      componentHeight: document.documentElement.clientHeight - 185
    }
  },
  methods: {
    onLoadData(selectedNode) {
      let that = this

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

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



      return new Promise(resolve => {
        getAction('/jeecg-product/dict.device_catalog_type/queryByCatalogId', params).then(function(res) {
          res.result.forEach(function(treeNode) {

            let node = new Object()

            node.key = treeNode.key
            node.title = treeNode.title
            node.isLeaf = treeNode.isLeaf
            node.id = treeNode.id
            node.pid = treeNode.pid
            node.icon = 
            node.nodeType = treeNode.nodeType
            node.children = []


            if (selectedNode != null) {
              node.path = selectedNode.dataRef.path + '-' + node.title
            } else {
              node.path = node.title
            }
            if (selectedNode == null) {
              that.treeData.push(node)
            } else {
              selectedNode.dataRef.children.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
      param.nodeType = e.node.dataRef.nodeType
      this.$emit('SelectNode', param)
    }
  },
  created() {
    this.onLoadData()
  }
}

注意两个地方：

（1）节点的属性构建。可以构建任意树节点的非必须属性，通过dataRef进行访问

（2）广播事件时，可以将一些常用的信息打包在一个object中，方便复用。我的做法如下：

2、列表

 

Template的布局如下：

Script代码结构：

需要注意的地方：

（1）scopedSlots和slots（官网文档讲的不是很清，要看代码）

scopedSlots：插槽table的cell区域

slots：插槽table的title区域，使用了slots，column就不能有单独的title属性，否则slots失效。

（2）利用jeecg-boot封装好的前端控件，各种控件可看官网，也可直接到生成的vue文件下找。如本文例子用用到的，与表关联的dropdownlist：