“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 21 天，点击查看活动详情”

1. 简介

昨天简单学习怎么样使用框架，并接入数据，今天就把数据渲染出来，并修改，完成一个真正的增删改查

2. 代码案例

1. 完善昨天的sutdnet列表页的columns 项

const columns: ProColumns[] = [
    {
        dataIndex: '_id',
        valueType: 'indexBorder',
        width: 48,
        align: 'center',
    },
    {
        title: "姓名",
        dataIndex: 'name',
        valueType: 'textarea',
    },
    {
        title: "性别",
        dataIndex: 'sex',
        render: sex => <Tag>{sex ? '男' : '女'}</Tag>,
        hideInSearch: true
    },
    {
        title: "邮箱",
        dataIndex: 'mail',
        valueType: "text",
        hideInSearch: true
    },
    {
        title: "性别",
        dataIndex: 'sex',
        valueType: "switch",
        hideInTable: true
    },
    {
        title: "生日",
        dataIndex: 'birthday',
        valueType: "fromNow",
        hideInSearch: true
    },
    {
        title: "号码",
        dataIndex: 'phone',
        valueType: 'text',
        hideInSearch: true
    },
    {
        title: "是否启用",
        dataIndex: 'status',
        hideInSearch: true,
        align: 'center',
        width: 100,
        renderText: (dom: boolean, entity) => (
            <Switch defaultChecked={dom} onChange={() => statusChange(entity)}></Switch>
        ),
    },
    {
        title: '操作',
        valueType: 'option',
        align: "center",
        render: (_, entity) => (
            <div>
                <Button type="primary" icon={<EditOutlined/>} key="edit" style={{ marginRight: 30 }}/>
                <Popconfirm title="delete" key="delete">
                    <Button type="primary" key="delete" icon={<DeleteOutlined/>} danger/>
                </Popconfirm>
            </div>
        ),
    },
];

2. 可以看到只是通过简单的控制需要展示的数据类型就完成了一个漂亮的列表页 3. 主要修改valueType 4. 可以查看源码中提示出的数据类型

• textarea 文本框
• password 密码框
• money 金额 option 操作 需要返回一个数组
• date 日期 YYYY-MM-DD
• dateWeek 周选择器
• dateMonth 月选择器
• dateQuarter 季度选择器
• dateYear 年选择器
• dateRange 日期范围 YYYY-MM-DD[]
• dateTime 日期和时间 YYYY-MM-DD HH:mm:ss
• dateTimeRange 范围日期和时间 YYYY-MM-DD HH:mm:ss[]
• time: 时间 HH:mm:ss
• timeRange: 时间区间 HH:mm:ss[]
• index：序列
• indexBorder：序列
• progress: 进度条
• percent: 百分比
• digit 数值
• second 秒速
• fromNow 相对于当前时间
• avatar 头像
• code 代码块
• image 图片设置
• jsonCode Json 的代码块，格式化了一下
• color 颜色选择器
• color 颜色选择器

5. 如果官网给的类型达不到自己的需求的话可以通过传一个 render 函数来自定义

2. 添加筛选条件

1. 在ProColumns 列表项中 通过**hideInSearch** 是否为false 判断是否需要显示这个筛选项
2. 在api接口的方法上添加一个参数

Partial<Student> 这句代码的意思是student的字段都是选填

async function getAllStudent(values: Partial<Student>) {
    return new Promise<GeneralArrayResponse<Student>>((resolve) => {
        request('/test/students', {
            method: 'GET',
            params: {
                name: values.name ? values.name : undefined
            }
        }).then(res => {
            resolve({
                data: res.data.map((item: { id: string, attributes: object }) => {
                    return {
                        id: item.id,
                        ...item.attributes
                    }
                })
            })
        })
    })
}

3. 数据排序

1. 在ProColumns 中添加

{
    title: "生日",
    dataIndex: 'birthday',
    valueType: "fromNow",
    hideInSearch: true,
    sorter: true
},

2. 修改API接口方法 添加了一个新的sort字段

function getAllStudent(values?: Partial<Student>, sort?: Partial<Student>)

4. 嵌套数据展示

1. student还有一个address字段，可以看到这是一个嵌套JSON
2. 用以往的想法直接对象.属性名 是没有数据的
3. 还是需要通过render 来展示

    {
        title: "地址",
        dataIndex: 'address',
        valueType: 'text',
        hideInSearch: true,
        renderText: (address: Student['address']) => {
            return address.city
        }
    }

3. 总结

1. 简单配置就可以达到一个列表数据的查询，条件查询，数据排序等功能