常见问题
Q: 为什么首次进入页面没有自动请求?
组件不会在 onMounted 自动调用 fetchFn,需在调用方 onMounted 中主动触发:
ts
onMounted(() => tableApi.value.fetchData())这样设计便于控制首次请求时机(例如等查询条件初始化完成)。
Q: 远程模式下 fetchFn 收到的 params 是什么?
params 是以下内容的合并结果:
queryParams(包含用户通过setQueryParams/fetchData(params)设置的字段)- 当前分页信息(
page/pageSize,仅当pagination配置生效时)
Q: setData 和直接改 props.data 有什么区别?
| 方式 | 行为 | 适用场景 |
|---|---|---|
改 props.data | 通过 watch 同步到内部 rawData | 整组数据替换 |
setData | 直接覆盖内部 rawData | 同一引用下的 push / splice |
注意:
watch不会检测到同引用数组的内部变化,此时必须用setData。
Q: 表格没显示出 row 字段或类型报错?
ColumnSlotProps.row 设为可选(表头插槽不传 row)。在单元格插槽里使用时:
- 模板里写
row!进行非空断言 - 或在外部方法参数中标
row?: T
vue
<template #action="{ row }">
<el-button @click="edit(row!)">编辑</el-button>
</template>Q: componentEvents / componentProps 内的函数为什么能拿到 row?
XTable 会对这两类回调做包装,在原生事件参数末尾注入 (row, $index):
componentEvents.change(val, row, $index)← EP 原change(val)componentProps.beforeChange(row, $index)← EP 原beforeChange()
Q: 如何隐藏表头?
使用 EP 原生属性直接透传:
vue
<XTable :show-header="false" />Q: 「查询为空」和「搜索为空」如何区分?
仅远程模式下生效:
| 状态 | 触发条件 |
|---|---|
| 查询为空 | 首次请求就是空,或后续请求的查询条件(除 page/pageSize)和首次一致且无数据 |
| 搜索为空 | 用户在首次请求后改了查询条件,新请求结果为空 |
可分别通过 #empty / #search-empty 插槽或 emptyText / emptySearchText prop 自定义。