Skip to content

常见问题

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 自定义。

Released under the MIT License.