单元格渲染

三种方式，按优先级 slotName > componentType > formatter / 原始值。

注意：type: 'selection' / type: 'index' 列由 EP 原生渲染，不走上述优先级。

0. 特殊列 type

// 复选框列
{ prop: '__selection', label: '', type: ColumnType.Selection, width: 50 }

// 行序号列
{ prop: '__index', label: '#', type: ColumnType.Index, width: 60 }

// 展开行列（slotName 默认 'expand'）
{ prop: '__expand', label: '', type: ColumnType.Expand, slotName: 'detail' }

<XTable :columns="columns" :data="data">
  <template #detail="{ row }">
    <div class="detail">{{ row.description }}</div>
  </template>
</XTable>

1. 动态组件 componentType

{
  prop: 'status',
  label: '状态',
  componentType: 'el-tag',
  // props 支持对象或函数
  componentProps: (row) => ({
    type: row.status === 1 ? 'success' : 'danger',
  }),
}

函数字段自动包装

XTable 会识别 componentProps 对象内的函数字段，调用时在末尾注入 (row, $index)。例如 el-switch.beforeChange 原签名是 () => boolean | Promise<boolean>，注入后变成：

{
  prop: 'active',
  componentType: 'el-switch',
  componentProps: {
    beforeChange: (row: User, $index: number) => {
      return true
    },
  },
}

2. 自定义插槽 slotName

<XTable :columns="columns" :data="data">
  <template #action="{ row }">
    <el-button @click="edit(row!)">编辑</el-button>
  </template>
</XTable>

<script setup lang="ts">
const columns: ColumnConfig<User>[] = [
  { prop: 'action', label: '操作', slotName: 'action' },
]
</script>

插槽 props 类型：{ row?: T, column: ColumnConfig<T>, $index: number }（表头插槽中 row 为 undefined）。

3. formatter 格式化（EP 原生）

{
  prop: 'status',
  label: '状态',
  formatter: (row, column, value, index) => value === 1 ? '启用' : '禁用',
}

4. extraSlots（EP 原生插槽透传）

需要透传 EP 原生列插槽（如 filter-icon）时，通过 extraSlots 映射：

{
  prop: 'name',
  label: '姓名',
  extraSlots: { 'filter-icon': 'nameFilterIcon' },
}

<XTable :columns="columns" :data="data">
  <template #nameFilterIcon="{ column }">
    <el-icon><Search /></el-icon>
  </template>
</XTable>

'default' 由 XTable 内部管理，禁止配置；'header' 可由 headerSlotName 或 extraSlots 配置。