查看登录日志

1.在columns[]表头数组的操作列定义时，我们已经预留了查看当前行数据的方法

 {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="config"
          onClick={() => {
            handleUpdateModalVisible(true);
            setCurrentRow(record);
          }}
        >
          修改
        </a>,
         <a
            onClick={() => {
              setCurrentRow(record);
              setShowDetail(true);
            }}
          >
          查看
          </a>

      ],
    },

2.点查看链接时，会触发onClick，setCurrentRow(record)，会把当前选中行数据存入state,然后调用setShowDetail(true)，setShowDetail通过字面分析，应该又是让某个组件显示，根据setShowDetail，可以找到useState定义

  const [showDetail, setShowDetail] = useState(false);

再根据showDetail，我们可以找到一个Drawer组件，基本可以确定Drawer组件就是显示数据的主要组件，Drawer组件代码如下

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

分析下Drawer里面的代码，显示部分主要就是数据从哪里来，怎么显示。 {currentRow?.name && ( ProDescriptions，这段代码比较难理解，其实是这么来理解currentRow是否有数据？如果有currentRow.name是否有数据，如果有，则显示ProDescriptions组件内的内容，这里我们的currentRow中没有name属性，我们把name换成主键字段infoId， title={currentRow?.name}这段这么理解，currentRow是否有数据，如果有，则title=currentRow.name，我们当前行并没有name属性，换成一个固定的"查看"字符串,columns={columns},使用columns数组定义的列来展现当前行数据，这里我们的columns列中的操作列是不需要展现在组件上的，我们做个过滤去掉dataIndex等于option的操作列，改成columns={columns.filter(item=>item.dataIndex!=='option')} 修改后的Drawer组件代码如下：

   <Drawer
        width={600}
        visible={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={true}
      >
        {currentRow?.infoId && (
          <ProDescriptions
            column={2}
            title="查看"
            request={async () => ({
              data: currentRow || {},
            })}
            params={{
              id: currentRow?.infoId,
            }}
            columns={columns.filter(item=>item.dataIndex!=='option')}
          />
        )}
      </Drawer>

3.这段代码改完，保存，等前台编译完后，我们就可以查看效果了，代码这么简洁的主要原因是ProDescriptions组件帮我们做了很多封装，ProDescriptions使用可以参考官网procomponents.ant.design/components/… 做到这里，单表数据的简单增、删、改、查效果已经基本实现，举一反三，管理后台的数据维护功能基本可以参照这个登录日志的例子来实现了，下一章我们取出数据库中的树状菜单然后实现菜单的动态加载。

最近做了个小API应用，希望大家关注支持下: www.yuque.com/docs/share/…