Table 表格

表格整体设计

基础用法

配置columns表头和table-data表格数据。

自适应内容区高度

v0.1.17

表格配置 adaptive 可实现自适应内容区高度，adaptive 的默认值是 false，adaptive 的类型是

boolean | {
  /** 表格距离页面底部的偏移量，默认值为 `20` */
  offsetBottom?: number
  /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
  timeout?: number
}

注意

表格设置height属性后， adaptive属性将不在生效。

数据多级显示

columns中的 prop支持 x.y.z形式的多（无限）级数据形式。

注意

数据级不宜过多，可能会影响性能。

自定义状态

配置项中valueType为select、radio或checkbox 时，配置columns中的options，表格会自动显示 value 对应的状态和 label。

默认的逻辑是表格的tableData中的实际值和 options 中 value 对比严格相等的话，会取当前项的 label 显示在表格中，想自定义显示逻辑的话，只需配置columns 中 customGetStatus即可。

表格列样式简单修改

配置columns中的 fieldProps，不仅会作用于表单单项，也会作用于表格单项。使用 fieldProps可以做简单的样式修改，更强大的自定义样式，请使用自定义表格项。

操作栏

默认不显示。配置actionBar 即可。 actionBar 中的type 支持 button，icon和 link，对应element plus 的 ElButton，ElIcon 和 ElLink 组件。

配置 confirm 即可实现二次确认。配置 show 即可实现权限和动态显示。

操作栏actionBar 配置详情参考 ActionBarButtonsRow

操作栏事件

操作栏除了支持PlusTable Event中的clickAction和clickActionConfirmCancel外，v0.1.8版本开始支持自身的事件。

ActionBarButtonsRow支持以下事件。

事件名	类型	触发说明
`onClick`v0.1.8	ActionBarButtonsRow['onClick']	点击当前按钮的时触发，可与 PlusTable 的事件 `clickAction` 同时触发；操作需要二次确认时：PlusTable 的事件 `clickAction`会在确认时触发，而当前的 onClick 是在点击时触发；
`onConfirm`v0.1.8	ActionBarButtonsRow['onConfirm']	操作需要二次确认时，点击确认时触发
`onCancel`v0.1.8	ActionBarButtonsRow['onCancel']	操作需要二次确认时，点击取消时触发，可与 PlusTable 的事件 `clickActionConfirmCancel` 同时触发

操作栏权限控制

小于v0.1.7版本

可使用 ActionBarButtonsRow 中的 show 字段控制。

大于等于v0.1.7版本

可使用 ActionBarButtonsRow 中的 show 和 directives指令字段控制。参考 vue 渲染函数自定义指令

操作栏二次确认类型

v0.1.17 版本新增气泡确认框 ElPopconfirm

设置表格属性 actionBar.confirmType 为 popconfirm 即可生效，示例： <PlusTable :action-bar="{ confirmType: 'popconfirm'}" />

操作栏二次确认类型配置confirmType默认值为messageBox即 ElMessageBox.confirm

标题栏

标题栏默认显示右侧工具栏，可以使用title，toolbar插槽定制。不需要的的话配置 <PlusTable :title-bar="false" />即可。

拖动排序行

注意

拖动排序行对应的 el-table-column 的 props，使用dragSortableTableColumnProps 属性配置。

配置drag-sortable，同时配合dragSortEnd使用。

列设置拖拽排序列

配置 TitleBar中的columnSetting中的dragSort属性，默认为 true 可拖拽。

不需要可以给 false: <PlusTable :title-bar="{ columnSetting: { dragSort: false } }" />。

如下示例，点击表格右上角列设置图标，即可通过列设置拖拽排序列。

分页栏

默认不显示，配置pagination属性即可。

序号栏

注意

序号栏对应的 el-table-column 的 props，使用indexTableColumnProps 属性配置。

默认不显示。配置hasIndexColumn 为 true即可。配置indexContentStyle 可定制序号栏样式。使用indexTableColumnProps 为序号栏配置el-table-column属性。

多选

注意

多选栏对应的 el-table-column 的 props，使用selectionTableColumnProps 属性配置。

配置is-selection属性为true，即可显示表格多选框。默认值false。配合 el-table selection-change 事件使用。

展开行

注意

展开行栏对应的el-table-column 的 props，使用expandTableColumnProps 属性配置。

配置has-expand属性 true 可显示展开行，默认值 false。配合插槽 expand 使用。

树形结构

配置tree-props树形为children: 'children'，数据结构中有 children 即可。树形懒加载表格还需设置lazy，load。

注意

数据中 children中的id和表格id不能重复。row-key默认为id。

多级表头

v0.1.7

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

只需要将 el-table-column 放置于el-table-column 中，就可以实现组头。

表格显示单项插槽配置

组件提供 fieldSlots 对象可以简易配置表格显示单项插槽， fieldSlots 的插槽配置是根据表格的 valueType 自动进行匹配的，如：

valueType 是 img ，fieldSlots的插槽就是给 ElImage的。
valueType 是 link时，fieldSlots的插槽就是给 ElLink的。
valueType 是 tag时，fieldSlots的插槽就是给 ElTag的。
其他以此类推

要实现更强大的自定义，请使用自定义表格项。

注意

valueType 的值对应的组件不是 element-plus 组件时，fieldSlots不生效，或者组件本身没有插槽时也不生效。