ant-design表格同值行自动合并

2021-04-08 760 阅读1分钟

参考：ant-design.gitee.io/components/…

接收数据：渲染结果：

代码

当请求数据时，创建个map去存、记录要合并项category_name的次数

const [data, setData] = useState([]); //请求后存放的列表
const refresh = async () => {
    getList().then((res) => {
      setData(res?.desc_list || []);
      let category_list = res.desc_list;
      let map = new Map();
      for (let i = 0; i < category_list.length; i++) {
        if (map.has(category_list[i].category_name)) {
          map.set(
            category_list[i].category_name,
            map.get(category_list[i].category_name) + 1
          );
        } else {
          map.set(category_list[i].category_name, 1);
        }
      }
      setCategorySum(map);
      //   console.log(map);
    });
  };

然后在渲染的时候获取当前项的值，和上一项的值做比对，如果相同，不显示，即rowSpan = 0，不同，则赋予值，rowSpan = categorySum.get(value)就是当前值有多少相同的个数，赋给他

 const columns = [
    {
      title: "片级分类",
      dataIndex: "category_name",
      width: "10%",
      render: (value, row, index) => {
        const obj = {
          children: value,
          props: {},
        };
        if (categorySum) {
          if (value !== data[index - 1]?.category_name) {
            obj.props.rowSpan = categorySum.get(value);
          } else {
            obj.props.rowSpan = 0;
          }
        }
        return obj;
      },
    },
    {
      title: "描述内容",
      dataIndex: "content",
      width: "80%",
      editable: true,
    },...]
    
    
    
    <Table
        columns={columns}
    />