表格设置合并行后的斑马纹样式

先定义一个方法，对表格渲染的数据进行处理

const setRowSpans = () => {
  cartTable.value.forEach((v) => {
    v.rowspan = 1;
    v.classStripe = false;
  });
  for (let i = 0; i < cartTable.value.length; i++) {
    for (let j = i + 1; j < cartTable.value.length; j++) {
      if (cartTable.value[i].customerName === cartTable.value[j].customerName) {
        cartTable.value[i].rowspan++;
        cartTable.value[j].rowspan--;
        cartTable.value[j].classStripe = cartTable.value[i].classStripe;
      } else {
        cartTable.value[j].classStripe = !cartTable.value[i].classStripe;
      }
    }
    i = i + cartTable.value[i].rowspan - 1;
  }
};

然后在load的时候调用这个方法。

async function load() {
  setRowSpans();
}

定义el-table绑定的:row-class-name方法：

const tableRowClassName = ({ row }: { row: any }) => {
  if (
    (row.stock < row.quantity && !row.selected) ||
    (!row.enable && !row.selected)
  )
    return "!bg-[#F8F7F7]";
};

调用：

  <el-table
      :data="cart?.items"
      style="width: 100%"
      max-height="400"
      :row-class-name="tableRowClassName"
    >