附加列配置

序号列、选择列（多选 / 单选）、操作列的配置说明。

数据列配置见 列配置，请求 / 删除 / 分页 / 工具栏等见 请求与行为配置。

indexColumn — 序号列

属性	说明	类型	默认值
show	是否显示序号列	Boolean	true
label	列头文案	String	'序号'
width	列宽	Number	60
align	对齐方式	String	'center'
indexMethod	自定义序号：(index, page, pageSize) => number	Function	-

indexColumn: { show: true, label: 'No.', width: 70 }
// 或自定义序号
// indexColumn: { indexMethod: (i, page, size) => (page - 1) * size + i + 1 }

---

selection — 选择列（多选 / 单选）

属性	说明	类型	默认值
show	是否显示选择列	Boolean	false
type	选择模式：'multiple' 多选（checkbox）/ 'single' 单选（radio）	String	'multiple'
width	列宽	Number	48
selectable	控制某行是否可选：(row) => boolean	Function	-
selectOnClickRow	是否单击行选中：单选为选中/再次点击取消，多选为切换勾选；点击按钮/勾选框等交互元素时不触发	Boolean	false

跨页保留选中需同时配置 tableConfig.rowKey（多选依赖 reserve-selection，单选按 rowKey 比对）。

getSelectedRows() 始终返回数组：多选为多条，单选为 0 或 1 条。

单选支持再次点击已选中行（或 radio）取消选中。

仍可通过 tableProps.onRowClick 自定义行点击；与 selectOnClickRow 可同时使用（先执行自定义回调，再处理选中）。

选中行会加上高亮背景；单选同时启用 highlight-current-row（可在 tableProps 中覆盖）。

多选（默认）

selection: {
  show: true,
  selectOnClickRow: true, // 可选：单击行切换勾选
  selectable: (row) => row.status === 1
}

禁用状态的行不可勾选；开启 `selectOnClickRow` 后单击行可切换勾选；选中行有背景高亮。

const tableConfig = {
  rowKey: 'id',
  selection: {
    show: true,
    // type 默认 'multiple'，可省略
    selectOnClickRow: true,
    selectable: (row) => row.status === 1  // 禁用行不可选
  },
  // ...
}

// 获取选中行
const rows = tableRef.value?.getSelectedRows()

单选

selection: {
  show: true,
  type: 'single',
  selectOnClickRow: true, // 单击行即可选中
  selectable: (row) => row.status === 1
}

单选为 radio；开启 `selectOnClickRow` 后单击行即可选中，再次点击取消；`getSelectedRows()` 返回 0/1 条。

const tableConfig = {
  rowKey: 'id',
  selection: {
    show: true,
    type: 'single',
    selectOnClickRow: true,
    selectable: (row) => row.status === 1
  },
  // ...
}

const rows = tableRef.value?.getSelectedRows() // [] 或 [row]
const current = rows[0]

---

operationConfig — 操作列

操作列默认显示「编辑」和「删除」按钮，「复制」按钮默认关闭，需要时显式开启。

属性	说明	类型	默认值
show	是否显示整个操作列	Boolean	true
label	操作列标题	String	'操作'
showEdit	是否显示「编辑」按钮；支持 (row) => boolean 按行控制	Boolean | Function	true
showDelete	是否显示「删除」按钮；支持 (row) => boolean 按行控制	Boolean | Function	true
showCopy	是否显示「复制」按钮；支持 (row) => boolean 按行控制	Boolean | Function	false
width	操作列宽度（px）	Number	100
fixed	固定列：'left' / 'right'	String	'right'
align	对齐方式：'left' / 'center' / 'right'	String	'right'
size	按钮尺寸：'large'、'default'、'small'	String	'small'
columnProps	透传给操作列 el-table-column 的属性，如 showOverflowTooltip、resizable	Object	{}
editPermission	「编辑」按钮权限码；支持 (row) => string | string[] 按行返回	String | String[] | Function	-
deletePermission	「删除」按钮权限码；同上	String | String[] | Function	-
copyPermission	「复制」按钮权限码；同上	String | String[] | Function	-

状态为「待审核」时不显示编辑按钮；管理员角色不显示删除按钮；通过 operation-before/after 插槽扩展「查看」和「审核」按钮。

operationConfig: {
  label: '操作栏',
  showEdit: (row) => row.status !== 2,       // 待审核不显示编辑
  showDelete: (row) => row.role !== 'admin', // 管理员不显示删除
  width: 180,
  fixed: 'right',
  align: 'right',
  columnProps: {
    showOverflowTooltip: false
  }
}

<pro-table :table-config="tableConfig">
  <template #operation-before="{ row, tableRef }">
    <el-button link type="primary" size="small" @click="handleView(row)">查看</el-button>
  </template>
  <template #operation-after="{ row, tableRef }">
    <el-button v-if="row.status === 0" link type="warning" size="small" @click="tableRef.openEdit(row)">审核</el-button>
  </template>
</pro-table>

权限码用法详见 按钮权限。未配置全局 hasPermission 或未设置权限码时，仅按 showXxx 控制显隐。

基本用法

// 默认：编辑 + 删除，不显示复制
operationConfig: {
  width: 140
}

// 开启复制按钮
operationConfig: {
  showCopy: true,
  width: 180
}

// 只读表格：隐藏整个操作列
operationConfig: { show: false }

按行控制显隐

showEdit、showDelete、showCopy 支持传函数，根据当前行数据动态决定是否显示：

operationConfig: {
  // 状态为 2（已发布）时不允许编辑
  showEdit: (row) => row.status !== 2,
  // 仅创建人可删除
  showDelete: (row) => row.isCreator === true,
  // 草稿状态可复制
  showCopy: (row) => row.status === 0,
  width: 200
}

配合权限码

// 整表统一权限码
operationConfig: {
  editPermission: 'user:edit',
  deletePermission: 'user:delete',
  copyPermission: 'user:copy'
}

// 按行区分权限码（如仅自己创建的才能编辑）
operationConfig: {
  editPermission: (row) => row.isOwner ? 'user:edit' : '',
  deletePermission: (row) => row.isOwner ? 'user:delete' : ''
}

// 多权限码：有任一即显示
operationConfig: {
  editPermission: ['user:edit', 'admin:edit']
}

自定义插槽扩展操作按钮

操作列提供 operation-before 和 operation-after 插槽，可在内置按钮前后插入自定义按钮：

<pro-table :table-config="tableConfig">
  <!-- 在编辑/删除前插入「查看」按钮 -->
  <template #operation-before="{ row }">
    <el-button link type="primary" size="small" @click="handleView(row)">查看</el-button>
  </template>
  <!-- 在编辑/删除后插入「审核」按钮（按行控制）-->
  <template #operation-after="{ row }">
    <el-button v-if="row.status === 0" link type="warning" size="small" @click="handleAudit(row)">审核</el-button>
  </template>
</pro-table>