2. 显示数据详细内容

2.1 增加只在列表中显示的数据列定义

以最高学位举例，我们把他定义为只在详细页显示

  const columns: ProColumns<TYPE.Member>[] = [
    ...
    {
      title: '最高学位',
      dataIndex: 'degree',
      //下面这个属性是起决定作用的
      hideInTable: true,
      valueEnum: {
        0: ' ',
        1: '学士学位',
        2: '硕士学位',
        3: '博士学位',
      },
    },

2.2 用变量控制是否显示数据详细页

定义两个新的useState变量，分别对应是否显示详细页以及当前数据值。

  const [showDetail, setShowDetail] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<TYPE.Member>();

通过列定义的render属性，把姓名变成可以点击的链接，点击后设置当前数据值并允许显示详细页

      render: (dom, record) => {
        return (
          <a 
            onClick={() => {
              setCurrentRow(record);
              setShowDetail(true);
            }}
          >
            {dom}
          </a>
        );
      },

2.3 实现一个简单的数据详细页

新的引用

import { Drawer } from 'antd';
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import ProDescriptions from '@ant-design/pro-descriptions';

在PageContainer里ProTable后面增加一个显示详细数据的滑动组件

      <Drawer
        width={600}
        visible={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={false}
      >
        {currentRow?.id && (
          <ProDescriptions<TYPE.Member>
            column={2}
            title={currentRow?.realName}
            request={async () => ({
              data: currentRow || {},
            })}
            params={{
              id: currentRow?.id,
            }}
            columns={columns as ProDescriptionsItemProps<TYPE.Member>[]}
          />
        )}
      </Drawer>

版权说明：本文由北京朗思云网科技股份有限公司原创，向互联网开放全部内容但保留所有权力。