【AntDesignPro】Ant Design Pro学习记录—ProTable的使用（二）

CrazyPanda发表于：2023-11-28 21:29:42浏览：700次TAG：

一、列表检索初始值设置

使用initialValue属性，配置列表检索的初始值

const columns: ProColumns<API.RoomItem>[] = [
    {      title: '名称',      
                dataIndex: 'name',
    },
    {          
            title: '状态',      
            dataIndex: 'status',      
            valueEnum: {        
                1: {          
                text: '空置中',          
                color: 'red',
            },        
            2: {          
            text: '招租中',          
            color: 'yellow',
            },        
            3: {          
            text: '已租赁',          
            color: 'green',
            },
      },      
      initialValue: 1,
    },
  ];

根据业务需要，从其他页面跳转到当前列表页面，默认检索对应状态的数据，首先获取状态的参数值，然后赋值给initialValue，就可以实现传不同状态参数进来，显示对应状态的数据

使用useLocation获取参数

const location = useLocation();
const params = location.search.split('=');
const queryStatus = params[1];

赋值

const columns: ProColumns<API.RoomItem>[] = [
    {      title: '名称',      
                dataIndex: 'name',
    },
    {      title: '状态',      
                dataIndex: 'status',      
                valueEnum: {        
                    1: {          
                    text: '空置中',          
                    color: 'red',
                },        
                2: {          
                text: '招租中',          
                color: 'yellow',
                },        
                3: {          
                text: '已租赁',          
                color: 'green',
                },
      },      
      initialValue: queryStatus,
    },
  ];

二、字段缩略显示

列表显示时，有些内容特别长，导致列表变形，仅设置width还不能达到想要的效果，可以使用ellipsis:true属性实现，同时需要设置对应的宽度width，超过长度的自动显示省略号,原文内容会以气泡形式展示。

const columns: ProColumns<API.RoomItem>[] = [
    {      
        title: '房源名称',      
        dataIndex: 'name',      
        width: 200,      
        ellipsis: true,
    },

效果如下