树组件

基于ElementUI el-tree组件

组件名

TreeView

配置项

{
  "name": "Tree",
  "label": "树型列表",
  "data_url": "/table/tree/{objectCode}",
  "editable": false,
  "conf": {
    "node-key": "id",
    "highlight-current": true,
    "default-expand-all": false,
    "check-on-click-node": false,
    "expand-on-click-node": false,
    "show-checkbox": false,
    "default-expanded-keys": [],
    "default-checked-keys": [],
    "accordion": false,
    "indent": 16,
    "icon-class": "el-icon-caret-right",
    "draggable": false,
    "props": {
      "label": "label",
      "children": "children"
    }
  },
  "operation-bar": {
    "show": true,
    "group": true,
    "style": {},
    "conf": {
      "size": "mini",
      "type": "primary"
    },
    "add": {
      "show": true,
      "text": "",
      "conf": {
        "size": "mini",
        "type": "primary",
        "icon": "el-icon-document-add"
      }
    },
    "edit": {
      "show": true,
      "text": "",
      "conf": {
        "size": "mini",
        "type": "primary",
        "icon": "el-icon-edit"
      }
    },
    "delete": {
      "show": true,
      "text": "",
      "conf": {
        "size": "mini",
        "type": "danger",
        "icon": "el-icon-delete-solid"
      }
    }
  }
}

name

会作为内部el-tree的ref name。

data_url

表格数据接口地址。

editable

是否可编辑。只有开启，才能新增、修改、删除节点数据。

conf

ElementUI el-tree组件配置。

operation-bar

顶部操作栏配置。见名知意，不深入解释了。

插槽

operation-bar

顶部操作条的插槽。传递参数:

• conf: operation-bar配置项
• choseData: Array, 树点选的数据

prefix-btn

顶部操作条添加按钮前的插槽。传递参数:

• conf: operation-bar配置项
• activeData: 树点选的数据
• choseData: Array, 树选中的数据

add-btn

顶部操作条添加按钮的插槽。传递参数:

• conf: operation-bar.add配置项
• activeData: 树点选的数据
• choseData: Array, 树选中的数据
• add: 新增行为，可执行

batch-delete-btn

顶部操作条删除按钮的插槽。传递参数:

• conf: operation-bar.delete配置项
• activeData: 树点选的数据
• choseData: Array, 树选中的数据
• batchDelete: 新增行为，可执行

suffix-btn

顶部操作条删除按钮后的插槽。传递参数:

• conf: operation-bar配置项
• activeData: 树点选的数据
• choseData: Array, 树选中的数据

域配置

TreeView下域配置无效

很显然, 单纯的一个树不存在字段呈现的说法，显示上它只关注树的两个特点:

1. 结构: 即pid，id
2. 树节点名: 即label