列配置

tableConfig.columns 定义表格的数据列，每项支持 Element Plus Table Column 的常用属性，以及以下扩展。

序号列、多选列、操作列见 附加列配置。

属性总览

属性	说明	类型
key / prop	列对应数据字段名	String
label	列头文案	String
width	列宽（px）	Number
minWidth	最小列宽，剩余空间自动分配	Number
fixed	固定列：'left' / 'right'	String
align	对齐：'left' / 'center' / 'right'	String
formatter	格式化函数：(value, row, index) => string	Function
slot	使用插槽渲染，插槽名为 slot 值，作用域 { row, tableRef }	String
tag	自动渲染 el-tag，见 tag 配置	Object
tip	列头文案旁的问号图标，hover 显示 tooltip 说明；可与 sortable 同用（排序图标在 tip 右侧）	String
emptyText	该列为空时的展示文案；优先级高于 tableConfig.emptyText / 全局 emptyText	String

---

综合示例

金额列用 formatter 格式化；类型列用 tag 渲染标签；价值标签列用 slot 自定义；备注列空值显示「—」。

columns: [
  { label: '姓名', key: 'name' },
  {
    // formatter：格式化金额
    label: '金额', key: 'amount', align: 'right',
    formatter: (val) => `¥${Number(val).toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`
  },
  {
    // tag：自动渲染 el-tag
    label: '类型', key: 'type',
    tag: { map: { 1: '普通', 2: 'VIP', 3: '企业' }, type: { 1: '', 2: 'warning', 3: 'success' } }
  },
  {
    // slot：自定义内容
    label: '价值标签', key: 'amount', slot: 'statusSlot'
  },
  { label: '备注', key: 'remark', emptyText: '—' }
]

<pro-table :table-config="tableConfig">
  <template #statusSlot="{ row, tableRef }">
    <el-tag :type="row.amount > 10000 ? 'success' : 'info'" size="small">
      {{ row.amount > 10000 ? '高价值' : '普通' }}
    </el-tag>
  </template>
</pro-table>

---

formatter — 格式化文案

formatter 接收 (value, row, index) 三个参数，返回字符串用于展示。

columns: [
  {
    label: '金额',
    key: 'amount',
    formatter: (value) => `¥${Number(value).toFixed(2)}`
  },
  {
    label: '类型',
    key: 'type',
    formatter: (value, row) => {
      const map = { 1: '管理员', 2: '普通用户', 3: '访客' }
      return map[value] || '未知'
    }
  }
]

---

slot — 自定义列内容

配置 slot 后，该列使用指定名称的插槽渲染，作用域包含 { row, tableRef }。

columns: [
  { label: '头像', key: 'avatar', slot: 'avatar', width: 80 },
  { label: '自定义操作', key: 'action', slot: 'customAction', width: 200 }
]

<pro-table :table-config="tableConfig">
  <template #avatar="{ row, tableRef }">
    <el-avatar :src="row.avatar" />
  </template>
  <template #customAction="{ row, tableRef }">
    <el-button size="small" @click="handleView(row)">查看</el-button>
    <el-button size="small" type="warning" @click="tableRef.openEdit(row)">审核</el-button>
  </template>
</pro-table>

---

tag 配置

列配置 col.tag 后，该列自动渲染为 el-tag，无需写 formatter 或 slot。

属性	说明	类型	默认值
map	值到文案的映射，如 { 1: '启用', 0: '禁用' }	Object	-
type	值到 tag 类型的映射；支持 ''、'success'、'warning'、'danger'、'info'	Object	-
effect	tag 效果：'light'、'dark'、'plain'	String	'light'
size	tag 尺寸：'large'、'default'、'small'	String	'small'

columns: [
  {
    label: '状态',
    key: 'status',
    width: 100,
    tag: {
      map: { 1: '启用', 0: '禁用', 2: '待审核' },
      type: { 1: 'success', 0: 'danger', 2: 'warning' }
    }
  },
  {
    label: '角色',
    key: 'role',
    width: 120,
    tag: {
      map: { admin: '管理员', user: '用户', guest: '访客' },
      type: { admin: 'danger', user: '', guest: 'info' },
      effect: 'plain'
    }
  }
]

---

tip — 列头说明

配置 tip 后，列头文案右侧显示问号图标，hover 弹出 tooltip。样式与表单字段 field.tip 一致；开启 sortable 时，Element Plus 排序图标仍追加在 tip 右侧。

columns: [
  {
    label: '配送员未代付(支)',
    key: 'deliveryUnpaid',
    tip: '配送员尚未代付金额',
    align: 'center',
    sortable: true
  },
  {
    label: '线上支付(支)',
    key: 'onlinePay',
    tip: '微信等线上支付支出金额'
  }
]

---

emptyText — 空数据提示

tableConfig.emptyText 配置表格整体无数据时的提示文案，列级 emptyText 配置该列为空值时的展示文案。

// 表格级（覆盖全局配置）
tableConfig: {
  emptyText: '暂无相关数据'
}

// 列级
columns: [
  { label: '备注', key: 'remark', emptyText: '—' },
  { label: '联系方式', key: 'contact', emptyText: '未填写' }
]

列级 emptyText > tableConfig.emptyText > 全局 emptyText > 默认 '-'。