Skip to content

插槽

插槽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>

Released under the MIT License.