antd——实现单元格合并和自定义勾选功能——基础积累

antd实现table表格的单元格合并及自定义勾选功能

表格合并单元格及添加勾选功能：

antd实现单元格合并需要通过下面的方式来处理：

columns=[
	{
      title: "订单",
      dataIndex: "code",
      key: "code",
      customRender: (value, row, index) => {
        return {
          children: (
            <div style="display:flex;">
              <a-checkbox
                v-model={row.editFlag}
                style="margin-right:6px;"
              />
              <div>
                <div>{row.billOrderCode}</div>
                <div>{row.productName}</div>
              </div>
            </div>
          ),
          attrs: {
            rowSpan: this.codeArr[index],
          },
        };
      },
      customCell: (row, index) => {
        return {
          on: {
            click: (e) => {
              this.selectRow(row, index);
            },
          },
        };
      },
      width: 120,
    },
]

合并单元格部分的内容为一个多选框和部分字段

 customRender: (value, row, index) => {
  return {
    children: (
      <div style="display:flex;">
        <a-checkbox
          v-model={row.editFlag}
          style="margin-right:6px;"
        />
        <div>
          <div>{row.billOrderCode}</div>
          <div>{row.productName}</div>
        </div>
      </div>
    ),
    attrs: {
      rowSpan: this.codeArr[index],
    },
  };
},

合并单元格的部分

attrs: {
  rowSpan: this.codeArr[index],
},

触发点击事件

customCell: (row, index) => {
  return {
    on: {
      click: (e) => {
        this.selectRow(row, index);
      },
    },
  };
},

两个数组的合并

this.selectedRows = this.selectedRows.concat(arr);

对象数组的去重方法

对象数组的去重方法：

this.selectedRows = this.resetArray(this.selectedRows, "id");

使用的resetArray方法：

resetArray(Arr, id) {
  var obj = {};
  const arrays = Arr.reduce((setArr, item) => {
    obj[item[id]] ? "" : (obj[item[id]] = true && setArr.push(item));
    return setArr;
  }, []);
  return arrays;
},

获取合并单元格的数组

filterTableData() {
  let contactDot = 0;
  this.serialArr = [];
  this.tableData.forEach((item, index) => {
    if (index == 0) {
      this.serialArr.push(1);
    } else {
      if (item.serial === this.tableData[index - 1].serial) {
        this.serialArr[contactDot] += 1;
        this.serialArr.push(0);
      } else {
        contactDot = index;
        this.serialArr.push(1);
      }
    }
  });
  this.changeColumns();
},

changeColumns方法

changeColumns(){
	this.columns = [
	{
           title: "物料类型",
           dataIndex: "materialType",
           key: "materialType",
           scopedSlots: { customRender: "materialType" },
           width: 100,
           align: "center",
           customRender: (value, row, index) => {
             return {
               children: <span>{row.materialTypeName}</span>,
               attrs: {
                 rowSpan: this.serialArr[index],
               },
             };
           },
         },
	]
}

完成！！！多多积累，多多收获！！！