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

目录

一、列表检索初始值设置

二、字段缩略显示

---

一、列表检索初始值设置

使用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,
    },

效果如下

效果是很不错，可惜不符合客户需求，客户不想让显示气泡...，最后费了好大劲也没找到只缩略而不显示气泡的方法，最终只能不使用ellipsis:true配置，自己动手改接口，按照宽度截取能显示的文字配上省略号显示，这样既实现了缩略，又不显示气泡。如果谁知道怎样配置可以隐藏气泡可以评论告诉我。