修改elementui的表格合并行和表格表头边框

前言

修改elementui的表格合并行和表格表头边框需要注意的地方

一、为什么有时候修改了样式却没有生效？

当我们在修改elementui的样式的时候发现样式不生效的时候，需要查看是否给需要的元素添加上了样式，如果添加上了还是没有生效的时候就是样式的层级不够或者没有穿透，使用 >>> 或者 /deep/ 进行穿透，或者!important提高层级。

如图：

代码如下（示例）：
html:

<template>
  <div class="table-box">
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        empty-text
        border
        header-align="center"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="id" label="班次" align="center" width="80">
        </el-table-column>
        <el-table-column prop="name" label="工程师" align="center" width="80">
        </el-table-column>
        <el-table-column prop="amount1" label="时间" align="center" width="280">
        </el-table-column>
        <el-table-column prop="amount2" label="备注" align="left">
        </el-table-column>
      </el-table>
    </div>
</template>

css:

<style lang="scss" scoped>
.table-box {
  /deep/.has-gutter {
    .is-center,
    .is-leaf,
    .el-table__cell {
      border-left: none !important;
      border-right: none !important;
      &:nth-last-child(2){
        border-right: 1px solid #ccc !important;
        text-align: center !important;
      }
    }
  }
}
</style>

js:

export default {
  data() {
    return {
      tableData: [
        {
          id: "白班",
          name: "前端",
          amount1: "2022-4-15 12:12:12",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "白班",
          name: "前端",
          amount1: "2022-4-15 12:12:12",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "夜班",
          name: "后端",
          amount1: "2022-4-15 08:12:12",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "夜班",
          name: "后端",
          amount1: "2022-4-15 09:12:12",
          amount2: "2.2",
          amount3: 17,
        },
      ],
    };
  },
  created(){
    this.datafunc()
  },
  methods: {
    // 合并行函数
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        return {
          rowspan: row.rowspan,
          colspan: 1,
        };
      }
    },
    datafunc() {
      let baiShfitArrary = [];
      let yeShfitArrary = [];
      let bainum = 0;
      let yenum = 0;
      this.tableData.forEach((item) => {
        if (item.id == "白班") {
          baiShfitArrary.push(item);
          bainum += 1;
        } else {
          yeShfitArrary.push(item);
          yenum += 1;
        }
      });
      if (baiShfitArrary.length > 0) baiShfitArrary[0].rowspan = bainum;
      if (yeShfitArrary.length > 0) yeShfitArrary[0].rowspan = yenum;
      this.tableData = [...baiShfitArrary, ...yeShfitArrary];
    },
  },
};
</script>