常见问题
1. 如何将多个字段传入原件?
比如我需要在一个表格列中展示头像加上姓名.
解决办法有两种:
- 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',
};
},
}),
],
});
});
2. 如何在表格实现开关切换的需求？
查看代码
tsx
import { defineFatTable } from '@wakeadmin/components';
import { ElAvatar, ElMessageBox, ElSpace } from 'element-plus';
/**
* 列表项定义
*/
interface Item {
id: number;
name: string;
open: boolean;
}
/**
* 表单查询
*/
interface Query {
name: string;
open: boolean;
}
export default defineFatTable<Item, Query>(({ column }) => {
return () => ({
title: 'Switch 开关示例',
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 ?? ''}`,
open: false,
};
});
return {
list: mockData,
total: 100,
};
},
columns: [
column({
label: '名称',
prop: 'name',
queryable: true,
valueType: 'search',
}),
// 开关状态搜索
column({
label: '状态',
type: 'query',
prop: 'open',
valueType: 'select',
valueProps: {
options: [
{ label: '开', value: true },
{ label: '关', value: false },
],
},
}),
// 开关列
column({
label: '状态',
prop: 'open',
valueType: 'switch',
// 🔴 强制设置为编辑模式
columnMode: 'editable',
valueProps: {
beforeChange: async value => {
await ElMessageBox.confirm('确定切换?');
// 🔴 在这里请求后端接口
return true;
},
},
}),
],
});
});
3. 如何控制表格的单元格换行
查看代码
tsx
import { defineFatTable } from '@wakeadmin/components';
import { ElAvatar, ElMessageBox, ElSpace } from 'element-plus';
/**
* 列表项定义
*/
interface Item {
one: string;
two: string;
three: string;
four: number;
}
export default defineFatTable<Item>(({ 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,
one: '1' + '数据'.repeat(r % 100),
two: '2' + '数据'.repeat(r % 100),
three: '3' + '数据'.repeat(r % 100),
four: 1,
};
});
return {
list: mockData,
total: 100,
};
},
columns: [
column({
label: '单行省略',
prop: 'one',
// 🔴 单行省略, 使用 el-table-column 自带的 showOverflowTooltip
showOverflowTooltip: true,
}),
column({
label: '多行省略',
prop: 'two',
valueProps: {
// 🔴 多行省略, 使用默认文本类型、select 类型原件都支持
ellipsis: 3,
},
}),
column({
label: '单行省略',
prop: 'three',
showOverflowTooltip: true,
}),
column({
label: '下拉选择器',
prop: 'four',
valueType: 'select',
valueProps: {
ellipsis: 2,
options: [
{
label: '很长很长很长很长很长很长很长很长很长很长很长很长很长很长',
value: 1,
},
],
},
}),
column({
label: '输入框',
prop: '_',
width: 200,
showOverflowTooltip: true,
columnMode: 'editable',
}),
],
});
});
4. 如何自定义表格渲染
查看代码
tsx
import { defineFatTable } from '@wakeadmin/components';
interface T {
id: number;
name: string;
age: number;
address: string;
}
export default defineFatTable<T>(({ column, p }) => {
return () => {
return {
async request() {
return {
total: 100,
list: new Array(100).fill(0).map((_, index) => ({
id: index,
name: 'name' + index,
age: index,
address: 'address' + index,
})),
};
},
columns: [
column({
prop: p('name'),
label: '名称',
queryable: true,
}),
column({
prop: p('address'),
label: '地址',
queryable: true,
}),
],
// 自定义表格渲染
renderTable(scope) {
return (
<div>
{scope.list.map(item => {
return (
<div key={item.id}>
{item.name} - {item.address}
</div>
);
})}
</div>
);
},
};
};
});