【工作总结】2023.10第三周

本周主要是电力交易系统的开发与提测,项目难点在于各种表单联动、echarts图表配置及对后端返回数据的计算整理

1.antd的Table组件设置滚动条 踩坑

Table组件滚动条配置scroll:{{x:boolean||number,y:number}},当设置了该属性,父级组件不可再设overflow:auto属性,否则整个table将一起滚动,表格头部将无法固定。

      <Row className={styles.hasChildCard}>
        <Col className={`${styles.childCard} padding-top-0`} style={{ marginRight: "12px" }}>
          <div className="commonTitle2">多时段申报电量</div>
          <div className={styles.childCard2}>
            <Table
              columns={columns}
              pagination={false}
              dataSource={powerPredict?.tableData}
              scroll={{ x: 0, y: 170 }}//滚动属性
            />
          </div>
        </Col>

.hasChildCard {
  width: 100%;
  margin-bottom: 12px;
  .childCard {
    width: calc(50% - 6px);
    height: 316px;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0px 2px 4px 0px rgba(84, 86, 91, 0.1);
    .childCard2 {
      height: 200px;
      // overflow: auto;//该属性不可设置,若设置,相当于整个父级组件在滚动
    }
  }
}

2.项目中一定要使用"==="代替"=="

3.有请求的地方,尽量都添加loading效果

4.巧妙使用表格column配置项的render属性实现条件渲染

生成数据时,需要条件渲染的行,多添加一项

    // 生成方向判断表格数据
    for (let i = 0; i < 24; i++) {
      obj[`${i}:00`] = res2?.data?.nodeDirection?.[i];
      obj2[`${i}:00`] = res2?.data?.spotStrategy?.[i];
      obj2[`${i}:00isRed`] = res2?.data?.spotStrategy?.[i] !== res2?.data?.nodeDirection?.[i];
    }

    //columns配置
    const columns = [    {      title: <b>2023.09.15</b>,      dataIndex: "first",      key: "first",      fixed: true,    },  ];

  for (let i = 0; i < 24; i++) {
    columns.push({
      title: <b style={{ margin: "0 10px" }}>{i}:00</b>,
      dataIndex: `${i}:00`,
      key: `${i}:00`,
      render(s, row) {
        const text = new Map([          [1, "日前高"],
          [0, "实时高"],
        ]);
        return (
          <span style={ternaryOperator(row[`${i}:00isRed`], { color: "red" }, {})}>
            {ternaryOperator(//封装的三元运算符函数
              row[`${i}:00`] !== null || row[`${i}:00`] !== undefined,
              text.get(row[`${i}:00`]),
              "-",
            )}
          </span>
        );
      },
    });
  }