插槽
| 插槽 | props | 用途 |
|---|---|---|
empty | - | 自定义「查询为空」状态内容 |
search-empty | - | 自定义「搜索为空」状态内容(仅远程模式生效) |
append | - | 表格最后一行之后的追加内容(无限滚动等场景) |
[slotName] | { row?, column, $index } | 列单元格自定义内容(slotName 由列配置决定) |
[headerSlotName] | { column, $index } | 列表头自定义内容(headerSlotName 由列配置决定) |
[extraSlots value] | { row?, column, $index } | 通过 extraSlots 透传的 EP 原生插槽(如 filter-icon) |
「查询为空」vs「搜索为空」
仅远程模式(传入 fetchFn)下生效,用于区分两种空数据场景:
| 状态 | 触发条件 | 默认文案 | 对应插槽 / Prop |
|---|---|---|---|
| 查询为空 | 首次请求(或查询条件与首次一致)即无数据 | '暂无数据' | #empty / emptyText |
| 搜索为空 | 用户在首次请求后修改了查询条件,新请求结果为空 | '暂无查找的数据' | #search-empty / emptySearchText |
判定规则:首次 fetchData 时的查询参数(剔除 page / pageSize)会被记为基线,后续每次请求结束后用 JSON 序列化比对:相同 → 查询为空;不同且无数据 → 搜索为空。
自定义表头示例
vue
<XTable :columns="columns" :data="data">
<template #nameHeader="{ column }">
<el-icon><User /></el-icon>
<span>{{ column.label }}</span>
</template>
</XTable>
<script setup lang="ts">
const columns: ColumnConfig<User>[] = [
{ prop: 'name', label: '姓名', headerSlotName: 'nameHeader' },
]
</script>