Skip to content
Return to top
On this page

# 常见问题 #

## 如何将多个字段传入原件? #

比如我需要在一个表格列中展示头像加上姓名.

解决办法有两种:

- FatTable 完全支持自定义单元格的渲染
- 通过 getter 方法组装传递给原件的属性

我们详细来看下:

1. 自定义单元格渲染

查看代码
tsx

    import { defineFatTable } from '@wakeadmin/components';
    import { ElAvatar, ElSpace } from 'element-plus';

    /**
     * 列表项定义
     */
    interface Item {
      id: number;
      name: string;
      avatar: string;
    }

    /**
     * 表单查询
     */
    interface Query {
      name: string;
    }

    export default defineFatTable<Item, Query>(({ column }) => {
      return () => ({
        title: '自定义单元格',
        rowKey: 'id',
        async request(params) {
          const { pagination, query } = params;

          // 模拟请求
          const mockData: Item[] = new Array(pagination.pageSize).fill(0).map((_, idx) => {
            const r = Math.floor(Math.random() * 1000);
            return {
              id: idx,
              name: `${r}-${pagination.page}-${query?.name ?? ''}`,
              avatar: 'https://avatars.githubusercontent.com/u/15975785?v=4&size=64',
            };
          });

          return {
            list: mockData,
            total: 100,
          };
        },
        columns: [
          // 🔴 纯查询表单
          // 假设我们这里支持名称搜索
          column({
            type: 'query', // 🔴 设置为 query 表示不会作为单元格
            queryable: 'name',
            valueType: 'search',
          }),

          // 🔴 自定义单元格渲染
          column({
            label: '用户',
            render(_v, row) {
              return (
                <ElSpace>
                  <ElAvatar src={row.avatar}></ElAvatar>
                  <span>{row.name}</span>
                </ElSpace>
              );
            },
          }),
        ],
      });
    });

2. 使用 getter 组装数据传入原件

TIP

原件是严格遵循 `value/onChange` 协议, 也就是说，它就是一个原子的表单，类似 Input。你无法给他传递多个字段。

为此，FatTable 也提供了 getter/setter props 来满足这种使用场景。

查看代码
tsx

    import { defineFatTable } from '@wakeadmin/components';
    import { ElAvatar, ElSpace } from 'element-plus';

    /**
     * 列表项定义
     */
    interface Item {
      id: number;
      name: string;
      avatar: string;
    }

    /**
     * 表单查询
     */
    interface Query {}

    export default defineFatTable<Item, Query>(({ column }) => {
      return () => ({
        title: '组装原件数据',
        rowKey: 'id',
        async request(params) {
          const { pagination, query } = params;

          // 模拟请求
          const mockData: Item[] = new Array(pagination.pageSize).fill(0).map((_, idx) => {
            const r = Math.floor(Math.random() * 1000);
            return {
              id: idx,
              name: `${r}-${pagination.page}`,
              avatar: 'https://avatars.githubusercontent.com/u/15975785?v=4&size=64',
            };
          });

          return {
            list: mockData,
            total: 100,
          };
        },
        columns: [
          column({
            label: '用户',
            valueType: 'avatar',
            // 🔴 按照 avatar 的 value 类型传值
            getter(row) {
              return {
                avatar: row.avatar,
                title: row.name,
                description: '13732332333',
              };
            },
          }),
        ],
      });
    });