table组件 ​

https://element-plus.org/zh-CN/component/table.html

Hidden Title ​

属性事件插槽简介 ​

all ​

基础用法 ​

成华主题 ​

chenghua主题示例 ​

石景山主题 ​

shijingshan主题示例 ​

other ​

单选 ​

多选 ​

多级表头 ​

隐藏按钮或列 isShow ​

通常用法 ​

编辑 ​

reConfirm再确认 ​

表格里嵌套表格 ​

render函数 ​

改变操作按钮的属性 ​

对比 ​

属性 ​

pageAttrs 内部属性 ​

pageAttrs 会透传给内部 el-pagination。s-table 默认会先设置 current-page、page-size、page-sizes、layout、total、size 等分页属性，再合并 pageAttrs；所以 pageAttrs 中同名属性会覆盖默认值。分页事件仍统一由 s-table 处理并触发 page-change。

事件 ​

columns 内部属性 ​

columns 每一项都会生成一个 el-table-column。s-table 会额外处理 useSlot、render、filter、handler、isShow、columnEmptyText、btns、maxBtns 等字段；其它 el-table-column 属性会继续透传。

TypeScript 项目中建议从 sybz-components/types/table 引入列配置类型，并给 computed 或列数组显式标注行数据类型，这样 filter: ({ row }) => ...、render: ({ row }) => ... 里的 row 才能被推导：

import type { TableColumnList } from 'sybz-components/types/table'

type TemplateRow = {
  rank: number
  templateName: string
}

const templateTableColumns = computed<TableColumnList<TemplateRow>>(() => [
  { prop: 'rank', label: '序号', width: 64, align: 'center', useSlot: 'rank' },
  { prop: 'templateName', label: '热门文案模版', minWidth: 420, filter: ({ row }) => getTemplateName(row) },
])

import type { TableColumnList } from 'sybz-components/types/table'

type TemplateRow = {
  rank: number
  templateName: string
}

const templateTableColumns = computed<TableColumnList<TemplateRow>>(() => [
  { prop: 'rank', label: '序号', width: 64, align: 'center', useSlot: 'rank' },
  { prop: 'templateName', label: '热门文案模版', minWidth: 420, filter: ({ row }) => getTemplateName(row) },
])

columns.btns 内部属性 ​

btns 用于配置操作栏按钮。按钮数量超过 maxBtns 时，会展示 maxBtns - 1 个按钮，其余按钮放入“更多”下拉中。

render 参数 ​

render 统一接收一个对象参数：

render({ row, scope, value, column, action, index })

render({ row, scope, value, column, action, index })

回调参数 ​

filter 支持字符串或函数。传字符串时，会优先读取当前组件实例上的同名方法并用当前单元格 value 调用；没有同名方法时读取当前行的同名字段。传函数时只接收一个对象参数，和 disabled 用法保持一致。

filter、handler、isShow、disabled、reConfirm，以及按钮的 content / title 函数，推荐统一使用对象参数：

const callback = ({ row, scope, value, column, action, index, event }) => {}

const callback = ({ row, scope, value, column, action, index, event }) => {}

• value 是当前列或当前按钮 prop 对应的值。
• event 仅点击相关回调下存在。
• filter 不再使用旧的位置参数写法；函数形式固定为一个对象参数，和 render 保持一致。

说明 ​

• 组件底层基于 el-table 和 el-pagination 封装，未在上表列出的表格属性可继续通过 attrs 透传。
• 当 asyncUpdate 为 true 时，分页切换只触发 page-change 事件，由外部维护 pageNumber 和 pageSize。
• 操作栏 maxBtns 默认值为 4，表示总共最多显示 4 个槽位；当按钮数量超出时，会显示 maxBtns - 1 个按钮加一个“更多”入口。
• 单选推荐直接用 v-model + selection-type="single"；多选推荐直接用 v-model + selection-type="multiple"，如果要跨页保留选中项，记得传 row-key。