el-table复杂表格

文档 ↓

https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot

假如我们要做一个如下表格 ↓

在template中 ↓

        <el-table
          :data="rewardData"
          border
          :span-method="rewardSpanMethod"
          :header-cell-style="rewardHeaderStyle"
          stripe
        >
          <el-table-column label="种类" header-align="center">
            <el-table-column
              label="hideHeader1"
              prop="hide1"
              width="40px"
            ></el-table-column>
            <el-table-column
              label="hideHeader2"
              prop="hide2"
              width="40px"
            ></el-table-column>
          </el-table-column>
          <el-table-column
            prop="name"
            width="190px"
            label="奖励名称"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            prop="grandMoney"
            label="一等奖"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            prop="patentGoldMoney"
            label="二等奖"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            width="140px"
            label="备注"
            align="center"
            header-align="center"
            prop="govermentRemark"
          ></el-table-column>
        </el-table>

data中 ↓

      rewardData: [
        {
          hide1: "短篇小说",
          hide2: "长篇小说",
          name: "西游记",
          grandMoney: 100,
          patentGoldMoney: 80,
          govermentRemark:
            "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈全是我的哈哈哈哈",
        },
        {
          name: "红楼梦",
          grandMoney: 100,
          patentGoldMoney: 80
        },
        {
          name: "水浒传",
          grandMoney: 100,
          patentGoldMoney: 80
        },
        {
          name: "三国演义",
          grandMoney: 100,
          patentGoldMoney: 80
        },
        {
          name: "如果世上没有猫",
          grandMoney: 100,
          patentGoldMoney: 80
        },
        {
          name: "第七天",
          grandMoney: 100,
          patentGoldMoney: 80
        },
      ]

methods中 ↓

    rewardSpanMethod({ rowIndex, columnIndex }) {
        if(columnIndex == 0 || columnIndex ==1 || columnIndex == 5){
            if(rowIndex == 0){
                return [6,1]
            }else{
                return [0,0]
            }
        }
    },
    rewardHeaderStyle({ rowIndex, columnIndex }) {
      if (rowIndex == 1) {
        if (columnIndex == 0 || columnIndex == 1) {
          return { display: "none" };
        }
      }
    },

我们看到rewarData里的第一个数据与其它的有些不同。
“种类”这一项下只有两组数据，分别为“短篇小说”和“长篇小说”。

先把表格header（rewardHeaderStyle）里的样式取消，表格就变成了 ↓

下图代码代表我们只留下header里的第一行，将第二行隐藏。

详细点讲就是，表格第二行与（表格第一列或第二列）同时满足时，display为none。
而第一列和第二列和第六列都同时覆盖了包括自己在内的六行。

tada~~
一个复杂表格就完成啦~