技術標籤：前端遇到的技術難點和問題

• 第一列中第二行以後的行是需要合併的，el-table 提供了一個 span-method 屬性，用於傳入合併單元格方法，在裡面可以根據 rowspan、colspan 合併行或列
• 第 2、3、4 列需要改變表格 border，需要使用 /deep/ 修改 element 預設的顏色，使用 nth-child、first-child 等找到對應的行或列，修改border

<template>
  <div class="table-test">
    <el-table
      :data="dataList"
 

      border
      size="mini"
      :span-method="arraySpanMethod"
      :header-cell-style="{ background: '#f7f7f7' }"
    >
      <el-table-column
        v-for="item in ['a', 'b', 'c', 'd']"
        :key="item"
        :prop="item"
 

        :label="item"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: []
    };
  },
  mounted() {
    this.dataList = [1, 2, 3, 4].map(() => {
      return { a: "1"
 
, b: "2", c: "3", d: 4 };
    });
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex);
      // 只是遍歷表格td內容，不包含th表頭
      // 對第一列，進行合併列
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          // 第一列，第一行，預設
          return {
            rowspan: 1,
            colspan: 1
          };
        } else if (rowIndex === 1) {
          // 第一列，第二行，合併，佔this.dataList.length - 1行
          return {
            rowspan: this.dataList.length - 1,
            colspan: 1
          };
        } else if (rowIndex >= 2) {
          // 第一列，剩餘行，為空
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.table-test {
  width: 500px;
  margin: 100px;
  // border處理
  // 去掉表頭單元格th右邊框
  /deep/ .el-table th:not(:first-child) {
    border-right: 0;
  }
  // 去掉表格內容單元格td的右側邊框、底部邊框
  /deep/ .el-table td {
    border-right: 0;
    border-bottom: 0;
  }
  // 為第一行td增加底部border
  /deep/ .el-table__row:first-child td {
    border-bottom: 1px solid #eaeaea;
  }
  // 為第一行第一列td增加右側border
  /deep/ .el-table__row:first-child td:first-child,
  // 為第二行（合併後的）第一列td設定右側border
  /deep/ .el-table__row:nth-child(2) td:first-child {
    border-right: 1px solid #eaeaea;
  }
}
</style> 
-----------------------------