# 树表组件

基于el-table实现。只是内置了

# 组件名

TableTreeView

# 配置项

# 样例

{
  "name": "TableTreeView",
  "data_url": "/table/tree?objectCode={objectCode}",
  "delete_url": "/table/tree/delete?objectCode={objectCode}&ids={ids}",
  "multi_select": false,
  "conf": {
    "row-key": "id",
    "tree-props": {
      "hasChildren": "hasChildren",
      "children": "children"
    },
    "default-expand-all": false,
    "expand-row-keys": [],
    "indent": 16,
    "lazy": false,
    "default-sort": {"prop": "id", "order": "descending"},
    "highlight-current-row": true,
    "size": "medium"
  },
  "operation-bar": {
    "show": true,
    "group": true,
    "style": {},
    "conf": {
      "size": "mini"
    },
    "add": {
      "show": true,
      "text": "新增",
      "authorize": {
        "need_permit": false,
        "permit_by": "auth",
        "auths": [],
        "auth_match_mode": "any",
        "roles": [],
        "role_match_mode": "any"
      },
      "conf": {
        "size": "mini",
        "type": "primary",
        "icon": "el-icon-document-add"
      }
    },
    "delete": {
      "show": true,
      "text": "删除",
      "authorize": {
        "need_permit": false,
        "permit_by": "auth",
        "auths": [],
        "auth_match_mode": "any",
        "roles": [],
        "role_match_mode": "any"
      },
      "conf": {
        "size": "mini",
        "type": "danger",
        "icon": "el-icon-delete-solid"
      }
    },
    "expand": {
      "show": true,
      "text": "展开",
      "conf": {
        "size": "mini",
        "type": "info",
        "icon": "el-icon-caret-bottom"
      }
    },
    "shrink": {
      "show": true,
      "text": "收缩",
      "conf": {
        "size": "mini",
        "type": "info",
        "icon": "el-icon-caret-right"
      }
    }
  },
  "columns": [],
  "operation-column": {
    "show": true,
    "conf": {
      "fixed": "right",
      "width": "180"
    },
    "style": {},
    "buttons": {
      "show": true,
      "group": true,
      "style": {},
      "view": {
        "show": true,
        "text": "",
        "authorize": {
          "need_permit": false,
          "permit_by": "auth",
          "auths": [],
          "auth_match_mode": "any",
          "roles": [],
          "role_match_mode": "any"
        },
        "conf": {
          "size": "mini",
          "type": "success",
          "icon": "el-icon-view"
        }
      },
      "edit": {
        "show": true,
        "text": "",
        "authorize": {
          "need_permit": false,
          "permit_by": "auth",
          "auths": [],
          "auth_match_mode": "any",
          "roles": [],
          "role_match_mode": "any"
        },
        "conf": {
          "size": "mini",
          "type": "primary",
          "icon": "el-icon-edit"
        }
      },
      "delete": {
        "show": true,
        "text": "",
        "authorize": {
          "need_permit": false,
          "permit_by": "auth",
          "auths": [],
          "auth_match_mode": "any",
          "roles": [],
          "role_match_mode": "any"
        },
        "conf": {
          "size": "mini",
          "type": "danger",
          "icon": "el-icon-delete"
        }
      }
    }
  }
}

# 详细说明

配置项	数据类型	是否必须	备注
name	String	是	必填, 会作为内部`el-table`的`ref name`, 建议就设置为元对象名
data_url	String	否	业务数据的获取接口, 此配置项值DbMeta内置好了, 如果更改可能导致错误结果
delete_url	String	否	数据删除的接口地址, 此配置项值DbMeta内置好了, 如果更改可能导致错误结果
multi_select	Boolean	否	是否支持多选, 为true则显示复选框支持勾选。同时显示批量删除按钮
conf	Object	否	参考ElementUI `el-table`的配置项 (opens new window), 其中树结构相关的配置不能随意更改, 否则会出现异常
operation-bar	Object	否	这是表格上方的操作条的配置。具体内容见operation-bar
columns	Array	否	这是列的配置, 也就是域配置的内容, 容器组件上无需配置，对域的配置会自动回填到此配置项中
operation-column	Object	否	这是表格中`操作`列的配置。具体内容见operation-column

# operation-bar

这是表格上方的操作条的配置。

配置项	数据类型	是否必须	备注
show	Boolean	否	默认true。是否显示操作条，为false则会隐藏顶部操作条
group	Boolean	否	默认true。若为false, 则顶部操作按钮将不呈现为一组，而是按钮之间彼此分离
style	Object	否	顶部操作条的样式，你可以写任何css样式，但记得调试
conf	Object	否	此项配置将作为顶部操作条中按钮默认的配置
add	Object	否	针对顶部操作条`添加`按钮的配置
delete	Object	否	针对顶部操作条`删除`按钮的配置

TIP

查看上面的配置样例，可以发现针对按钮，是可以配置其鉴权信息的。无权限时，页面将隐藏此按钮。鉴权配置和菜单鉴权、路由鉴权中的配置项和含义是一致的。

# operation-column

这是表格中操作列的配置

配置项	数据类型	是否必须	备注
show	Boolean	否	默认true。是否显示操作列，为false则会隐藏顶部操作条
conf	Object	否	此项配置将作为列的配置，你可以控制操作列的列宽等
style	Object	否	操作列的样式，你可以写任何css样式，但记得调试
buttons	Object	否	针对操作列中数据行的按钮群配置，配置项含义见名知意，不在赘述

WARNING

由于TableTreeView和TableView都是基于el-table实现，因此多数配置都基本一致。最主要的几个区别如下:

TableTreeView没有分页控件————树没办法分页
TableTreeView中el-table原生配置项中关于树结构相关的配置不要变动，这些配置是TableView没有的
TableTreeView删除时会级联删除子节点

# props

# filterParams

表格数据的过滤入参，为http过滤而非前端过滤。此值用于SearchView参数传递。

# 插槽

# operation-bar

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

conf: operation-bar配置项
choseData: 表格点选的数据

# prefix-btn

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

conf: operation-bar配置项
choseData: 表格点选的数据

# add-btn

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

conf: operation-bar.add配置项
choseData: 表格点选的数据
add: 新增行为，可执行

# batch-delete-btn

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

conf: operation-bar.delete配置项
choseData: 表格点选的数据
batchDelete: 新增行为，可执行

# suffix-btn

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

conf: operation-bar配置项
choseData: 表格点选的数据

# float-right-btn

顶部操作条浮动右侧的插槽。传递参数:

conf: operation-bar配置项
choseData: 表格勾选的数据
activeData: 表格点选的数据

# buttons

操作列中按钮组的插槽。传递参数:

scope: 当前记录数据, 见el-table文档
conf: buttons配置

# inner-before-extend-btn

操作列中按钮组前面的插槽。传递参数:

scope: 当前记录数据, 见el-table文档
conf: buttons配置

# view-btn

操作列中查看按钮插槽。传递参数:

scope: 当前记录数据, 见el-table文档
conf: buttons.view.conf配置
view: 按钮行为方法

# edit-btn

操作列中编辑按钮插槽。传递参数:

scope: 当前记录数据, 见el-table文档
conf: buttons.edit.conf配置
edit: 按钮行为方法

# delete-btn

操作列中删除按钮插槽。传递参数:

scope: 当前记录数据, 见el-table文档
conf: buttons.delete.conf配置
delete: 按钮行为方法

# 域配置

域配置参考TableView的域配置即可, 完全一致。

← 表格组件树组件 →