Reference: ant – design. Gitee. IO/components /…

Received data:Render result:

code

When data is requested, a map is created to store and record the number of times category_NAME is merged

const [data, setData] = useState([]); // The list to be stored after the request
const refresh = async () => {
    getList().then((res) = >{ setData(res? .desc_list || []);let category_list = res.desc_list;
      let map = new Map(a);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);
    });
  };
Copy the code
  • Then get the value of the current item during rendering and compare it with the value of the previous item. If the value is the same, it will not be displayed, that isrowSpan = 0, different, value is given,rowSpan = categorySum.get(value)It’s how many of the same numbers are in the current value, and it’s assigned to him
 const columns = [
    {
      title: "Slice classification".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; }}returnobj; }, {},title: "Description".dataIndex: "content".width: "80%".editable: true,},... ]  <Table columns={columns} />Copy the code