Teek Design Vue3

主题

Teeker2025-07-19
704
2.7m

表格顶栏 ​

标题栏 ​

通过 title 属性设置标题栏。

我是表格的标题栏

顶栏插槽 ​

通过 head-left 插槽设置顶栏左侧内容，该插槽内容会覆盖标题栏，因此可以更灵活自定义标题栏或添加按钮。

通过 head-right 插槽设置顶栏右侧内容，该插槽会覆盖工具栏。

工具栏插槽 ​

工具栏插槽有 2 个：

  • head-tool-before 插槽设置工具栏左侧内容
  • head-tool-after 插槽设置工具栏左侧内容

其中这两个插槽可以如下参数：

  • tooltipProps：ElTooltip 组件 Props
  • handleSizeCommand：改变表格大小事件
  • handleRefresh：刷新表格事件
  • handleExport：导出表格事件
  • toggleColumnSetting：显示列设置抽屉事件

如果需要使用内置工具栏的按钮样式，请给你的 el-button 添加 head__tool-button 类名。

工具栏按钮权限 ​

通过 toolButton 数组指定显示的工具按钮，通过 disabledToolButton 指禁用的工具按钮。

密度配置 ​

通过 size 配置项可以修改表格默认密度大小，并且通过 sizeStyle 设置不同密度下 rowStyle、cellStyle、headerRowStyle、headerCellStyle 的样式。

提示

你仍然可以直接使用 ElTable 的 rowStyle、cellStyle、headerRowStyle、headerCellStyle 配置项，在 ProTable 上传入即可，但 sizeStyle 优先级更高。

导出配置 ​

通过传入 exportProps 配置项，可以自定义导出相关功能。

导出默认使用 file-saver 和 xlsx 插件进行前端导出，mode 有如下规则：

  • label：Excel 表头为列配置的 label，默认值
  • prop：Excel 表头为列配置的 prop
  • dataKey：Excel 表头为数据的 key，值得注意的是，如果数据为空，则 Excel 表头为空

如果想实现后端导出，则自行实现 exportFile 函数，参数为当前表格的数据。

列配置 ​

往 ProTable 直接传入 columnSetting 可以全局配置所有列在列配置的显示、筛选的 禁用/启用/隐藏 状态。

也可以在每一个 column 里单独配置列配置的显示、排序、筛选的 禁用/启用 状态。

基础配置 ​

通过 baseSetting 修改表格的默认基础设置，如禁用边框选择、启用斑马纹、关闭表头背景色等。

您仍然可以使用 ElementPlus 自带的属性，如边框、斑马纹开启等配置。

顶栏控制显隐 ​

通过 hideHead 配置来隐藏顶栏。

通过 controlHeadColumn 来开启控制顶栏功能，该配置会在表格最后一列添加一个图标，点击后可以控制顶栏的显隐，同时 controlHeadColumnProps 可以给该列传入一个 ElTableColumn 的配置，如 width 宽度等。