defineFatTable 定义器

TIP

defineFatTable 基本使用已经在 FatTable 中详细描述。

我们推荐使用 defineFatTable + TSX 来快速定义一个表格组件，使用 defineFatTable 可以获取到更好的智能提示和类型检查。

defineFatTable 大致用法如下：

tsx

interface T {
  // 列表项类型声明
}

interface Q {
  // 表单查询类型声明
}

export const MyTable = defineFatTable<T, Q>(({ table, column }) => {
  // 和 vue 的 setup 方法一样, 这里可以放置 Vue Composition API
  const someRef = ref(0);
  const someMethod = () => {};

  // 返回 FatTable props
  return () => ({
    // 列表请求
    async request(params) {
      // ...
    },
    // 列定义
    columns: [
      // ...
    ],
    // ... 其他 FatTable props
  });
});

defineFatTable 类似于 Vue 的 defineComponent, 支持放置 Vue Hooks，只不过要求返回的是 FatTable 的 props 定义。

参数

defineFatTable<Item, Query, Extra>(define: (context, options) => () => FatTableProps): VueComponent

泛型变量：

Item 表格记录的类型
Query 查询表单的类型
Extra 自定义 props 定义，外部可以通过 extra 传入自定义参数

context 包含以下成员

table: Ref<FatTableMethods> FatTable 实例引用
column column 构造方法
props 外部传入的 props。这是 FatTableProps 类型的。我们也可以通过 props.extra 访问扩展的自定义参数(见下文)
emit 事件触发

defineFatTable 最终返回一个 Vue 组件，可以像 FatTable 一样使用它：

tsx

const NyTable = defineFatTable(/*...*/);

<MyTable
  // 可以传入任何 FatTable 的 props、事件、插槽。就跟使用 FatTable 本身一样
  title="可以覆盖 defineFatTable 的 props, 即优先级高于 defineFatTable 内部定义的 prop"
  // 扩展参数，defineFatTable 内部可以通过 props.extra 访问到
  extra={{ id: 'custom ' }}
/>;

defineFatTable 定义器 #

参数 #

返回 #

defineFatTable 定义器

参数

返回