在使用antd遇到的不常见问题（一）

Posted 2023-03-09

参考技术A antd的select、DatePicker、TreeSelect、AutoComplete组件需要注意页面滚动会导致下拉框也随之移动，如下图：

日期组件可以通过getCalendarContainer属性来控制下拉框显示位置。具体使用getCalendarContainer=trigger => trigger.parentNode

其它组件通过getPopupContainer来阻止下拉框随页面滚动，写法同上

Antd表头在使用滚动Y和动态列时消失

【中文标题】Antd表头在使用滚动Y和动态列时消失

【英文标题】：Antd table header disapppear when using scroll Y and dynamic columns

【发布时间】：2021-12-30 09:54:20

【问题描述】：

我在为 Antd 表渲染动态列时遇到问题，当我重新渲染列时，表头消失了。

getDefaultColumns()

const getDefaultColumns = () => 
    return [
      
        title: <span className=`table-header`>STT</span>,
        align: "center",
        key: "STT",
        render: (value, record, index) =>
          (currentPage - 1) * pageSize + index + 1,
        width: 50,
        fixed: "left",
      ,
      
        title: <span className=`table-header pl-4`>Name</span>,
        dataIndex: "full_name",
        width: 150,
        fixed: "left",
        align: "left",
        render: (text, record) => (
          <span className="pl-4">record.full_name</span>
        ),
      ,
      
        title: <span className=`table-header pl-4`>Code</span>,
        dataIndex: "code",
        fixed: "left",
        align: "left",
        render: (text, record) => <span className="pl-4">record.code</span>,
      ,
      
        title: <span className=`table-header`>DOB</span>,
        dataIndex: "birthday",
        align: "center",
        render: (value) => <span>moment(value).format(DATE_FORMAT)</span>,
        fixed: "left",
      ,
      
        title: <span className=`table-header`>SUMMARY</span>,
        children: [
          
            title: (
              <span className=`table-header`>
                TB" "
                semester.key !== "whole_year"
                  ? `HK $semester.shortValue`
                  : semester.value
              </span>
            ),
            dataIndex: ["study_summary_info", "average_semester"],
            key: "study_summary_info_average_semester",
            align: "center",
          ,
          
            title: <span className=`table-header`>Rank</span>,
            key: "study_summary_info_ranked_academic",
            align: "center",
            render: (value, record) => 
              return (
                <SelectOption
                  ...
                />
              );
            ,
          ,
          
            title: <span className=`table-header`>Conduct</span>,
            key: "study_summary_info_conduct",
            align: "center",
            render: (value, record) => 
              return (
                <SelectOption
                  ...
                />
              );
            ,
          ,
        ],
      ,
      
        title: <span className=`table-header`>Day off</span>,
        dataIndex: ["study_summary_info", "day_off"],
        key: "study_summary_info_day_off",
        align: "center",
      ,
      
        title: <span className=`table-header`>Title</span>,
        key: "study_summary_info_title",
        align: "center",
        render: (value, record) => 
          return (
            <SelectOption
              ...
            />
          );
        ,
      ,
      
        title: <span className=`table-header`>Result</span>,
        key: "study_summary_info_result",
        align: "center",
        render: (value, record) => 
          return (
            <SelectOption
              ...
            />
          );
        ,
      ,
    ];
  ;

setupColumns()

const setupColumns = () => 
    filterClassHasSubject( class_id: classId, page: 1, size: 999 )
      .then((res) => 
        if (res.data.code === "success") 
          const data = res.data.data;

          let children = data.map((val) => 
            return 
              title: (
                <span className=`table-header`>val.subject_info?.name</span>
              ),
              key: (value, record, index) => `subject_$index`,
              width: 150,
              align: "center",
              ellipsis: true,
              render: (value, record) => 
                const point = record.average_transcript_info.find(
                  (x) =>
                    x.subject_id === val.subject_id &&
                    x.semester === semester.key
                );

                return (
                  <span>point?.value_number</span>
                );
              ,
            ;
          );

          let scoreGroup = 
            title: <span className=`table-header`>DTB</span>,
            children,
          ;

          let temp = getDefaultColumns();
          temp.splice(4, 0, scoreGroup);
          setColumns([...temp]);
        
      );
  ;

Table

<Table
  dataSource=summaryData
  columns=columns
  bordered
  rowClassName=(record, index) =>
    index % 2 === 1
      ? "odd-row attendance-row"
      : "bg-white attendance-row"
  
  pagination=false
  scroll= x: "100vw", y: 580 
/>

当我删除Table 上的滚动 Y 时，不会发生这种情况。 当 semester 或 classId 更改时，动态呈现列。

Before change semester

After change semester

【参考方案1】：

就我而言，这是因为列中的属性key。解决方案是使用string，而不是使用函数返回string。