Closed louz closed 1 week ago
https://github.com/louz/antd-issue
// 用户类定义 export class User { id: string; name: string; gender: 'M' | 'F'; constructor(args: { id: string; name: string; gender: 'M' | 'F'; }) { this.id = args.id; this.name = args.name; this.gender = args.gender; } get genderText(): string { return this.gender === 'M' ? '男' : '女'; } } // column配置 const columns = [{ title: 'id', dataIndex: 'id', key: 'id' }, { title: 'name', dataIndex: 'name', key: 'name' }, { title: 'gender', dataIndex: 'gender', key: 'gender', filters: [{ text: 'M', value: '男' }, { text: 'F', value: '女' }], onFilter: (value, record) => record.gender === value, render: (_, record) => { console.log({record}); return record.genderText; } }] const users: User[] = getUsers(); // 初始化得到一个User数组 // 然后使用table组件进行渲染 <Table rowKey="id" dataSource={users} columns={columns} />
点击gender列的过滤按钮后,gender列的render函数得到的record对象仍是User类型的
但当点击gender列的过滤按钮后,gender列的render函数得到的record对象并不是User类型的,只是一个有id、name、gender字段的普通对象,没有genderText属性或方法,因此也不能正确显示出该列的值;
就是说,希望在任何时候获取到的行数据对象,仍然和当初传入dataSource的元素对象类型保持一致
需要保证 dataSource 可序列化,内部不会保留 class
Reproduction link
https://github.com/louz/antd-issue
Steps to reproduce
What is expected?
点击gender列的过滤按钮后,gender列的render函数得到的record对象仍是User类型的
What is actually happening?
但当点击gender列的过滤按钮后,gender列的render函数得到的record对象并不是User类型的,只是一个有id、name、gender字段的普通对象,没有genderText属性或方法,因此也不能正确显示出该列的值;
就是说,希望在任何时候获取到的行数据对象,仍然和当初传入dataSource的元素对象类型保持一致