Ant Design ProV5 Table columns定义valueType

最新推荐文章于 2024-09-04 14:32:56 发布

原创最新推荐文章于 2024-09-04 14:32:56 发布 · 5.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ant design

React_AntD 专栏收录该内容

18 篇文章

订阅专栏

本文介绍ProTable组件，一种增强型表格方案，用于简化中后台应用开发。它支持多种配置选项，如自定义列标题、搜索栏下拉选择、时间区间筛选等，并提供了丰富的示例说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ProTable - 高级表格 - ProComponents🏆 让中后台开发更简单包含 table form 等多个组件。https://procomponents.ant.design/components/table

https://procomponents.ant.design/components/schema#valuetype-列表

// 多种配置
{
      title: (_, type) => {
        if (type === 'table') {
          return '商户名称';
        }
        return '商户'; // 搜索框label
      },
      hideInSearch: false,
      hideInForm: false,
      hideInTable: false,
      align: 'center',
      dataIndex: 'name',
      renderText: (val) => val || '-',
}

//搜索栏 下拉选择 valueType: 'select',
{
      title: '运营中心',
      dataIndex: 'merchantId',
      valueType: 'select',
      fieldProps: {
        options: operateOption, // 动态变量项
      },
      hideInTable: true // 列表隐藏
},

// 搜索栏 时间区间 valueType: 'dateRange',
{
      title: '合同签订日期',
      dataIndex: 'contractDate',
      valueType: 'dateRange',
      hideInTable: true // 列表隐藏
},

{
      title: '品牌名称',
      dataIndex: 'brandName',
      fixed: 'left',
      width: 250,
      hideInSearch: true, // 搜索栏 隐藏
},

// 下拉选项 枚举 valueEnum
{
      title: '合同状态',
      dataIndex: 'contractStatus',
      align: 'center',
      valueEnum: statusOptionEnum,
      width: 200,
    },

// 操作 valueType: 'option',
{
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="view"
          onClick={() => {
            setCurrentRow(record);
            setViewVisible(true);
          }}
        >
          查看
        </a>,
        <a
          key="del"
          onClick={() => {            
            requestDel(record.id);
          }}
        >
          删除
        </a>,
      ],
},