element表格实现合并行或列，实现斜线表头

---

前言

element的table是常用的组件，在使用中会出现一些特殊的需求，这里总结了两个案例。

---

一、合并行或列

实现效果

完整代码

<template>
  <div class="table-box">
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      :cell-style="columnStyle"
      :header-cell-style="headerStyle"
      :cell-class-name="tableRowClassName"
      @cell-mouse-leave="cellMouseLeave"  
      @cell-mouse-enter="cellMouseEnter"
      border
      >
      <el-table-column
        prop="product"
        label="保险产品"
        width="278">
      </el-table-column>
      <el-table-column
        prop="responsibility"
        label="保险责任">
      </el-table-column>
      <el-table-column
        prop="optionOne"
        label="方案A">
      </el-table-column>
      <el-table-column
        prop="optionTwo"
        label="方案B">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: {},
  watch: {},
  data() {
    return {
      tableData: [
        {
          product: '意外险',
          responsibility: '意外伤害身故和残疾(扩展食物中毒）',
          optionOne: '80万元',
          optionTwo: '100万元',
        },
        {
          product: '意外险',
          responsibility: '意外伤害医疗（扩展食物中毒）',
          optionOne: '50万元',
          optionTwo: '80万元',
        },
        {
          product: '意外险',
          responsibility: '急性病医疗',
          optionOne: '5万元',
          optionTwo: '5万元',
        },
        {
          product: '意外险',
          responsibility: '紧急救援及运返',
          optionOne: '6万元',
          optionTwo: '6万元',
        },
        {
          product: '第三者责任险',
          responsibility: '意外伤害身故和残疾',
          optionOne: '15万元',
          optionTwo: '15万元',
        },
        {
          product: '第三者责任险',
          responsibility: '意外伤害医疗',
          optionOne: '18万元',
          optionTwo: '18万元',
        },
        {
          product: '第三者责任险',
          responsibility: '财产损失',
          optionOne: '2万元',
          optionTwo: '2万元',
        },
        {
          product: '第三者责任险',
          responsibility: '法律费用',
          optionOne: '10万元',
          optionTwo: '10万元',
        },
      ], //保险责任数据
      rowIndex: '-1', // cellMouseEnter方法变量
      OrderIndexArr: [], // 需要合并的项
      hoverOrderArr: [], // 悬浮选中的项
    };
  },
  created() {},
  mounted() {
    this.dataProcessing()
  },
  methods: {
    // 合并单元格前对数据进行处理
    dataProcessing() {
      let OrderObj = {}
      this.tableData.forEach((element, index) => {
          element.rowIndex = index
          if (OrderObj[element.product]) {
            OrderObj[element.product].push(index)
          } else {
            OrderObj[element.product] = []
            OrderObj[element.product].push(index)
          }
      })

      // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
      for (let k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.OrderIndexArr.push(OrderObj[k])
        }
      }
    },
    // 合并表格多行单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        for (let i = 0; i < this.OrderIndexArr.length; i++) {
          let element = this.OrderIndexArr[i]
          for (let j = 0; j < element.length; j++) {
            let item = element[j]
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                }
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }
            }
          }
        }
      }
    },
    // 单元格样式更改
    tableRowClassName({row,rowIndex}) {
      let arr = this.hoverOrderArr
      for (let i = 0; i < arr.length; i++) {
        if (rowIndex == arr[i]) {
          return 'hovered-row'
        }
      }
    },
    // 合并表格后鼠标效果
    cellMouseEnter(row, column, cell, event) {
      this.rowIndex = row.rowIndex;
      this.hoverOrderArr = [];
      this.OrderIndexArr.forEach(element => {
          if (element.indexOf(this.rowIndex) >= 0) {
            this.hoverOrderArr = element
          }
      })
    },
    // 合并表格后鼠标划出效果
    cellMouseLeave(row, column, cell, event) {
      this.rowIndex = '-1'
      this.hoverOrderArr = [];
    },
    // 更改单元格样式
    columnStyle({ row, column, rowIndex, columnIndex }) {
      return {
        height: "40px",
        'padding': '0px',
        'text-align': 'center',
      };
    },
    // 更改表头单元格样式
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return {
        height: "40px",
        'background': '#EEF7FE',
        'padding': '0px',
        'text-align': 'center',
        'color': '#333333',
      };
    },
  }
};
</script>
<style scoped lang="less">
.table-box {
  padding: 50px;
}
::v-deep {
  .el-table .hovered-row {
    background: #f5f7fa;
  }
}
</style>

二、斜线表头

实现效果

完整代码

<template>
	<div class="slash-table">
      <el-table  :data="tableListData" border>
        <el-table-column prop="id" label="个人信息" width="150" align="center">
            <el-table-column prop="id" label="ID" align="center" width="150"></el-table-column>
        </el-table-column>
        <el-table-column prop="weight" label="体重" align="center"></el-table-column>
        <el-table-column prop="height" label="身高" align="center"></el-table-column>
        <el-table-column prop="time" label="入职时间" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="city" label="城市" align="center"></el-table-column>
        <el-table-column prop="cityDistrict" label="区县" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" align="center"></el-table-column>
        <el-table-column prop="iDCardNo" label="身份证" align="center"></el-table-column>
     </el-table>
    </div>
</template>
<script>
export default {
	name: "",
  components: {},
  props: {},
  watch: {},
  data() {
    return {
      tableListData: [
        {
          id: '435',
          weight: '66',
          height: '175',
          time: '2016-05-03',
          name: '王小虎',
          city: '上海',
          cityDistrict: '金华区',
          address: '上海市金华区金沙江路',
          iDCardNo: '51326562625626',
        },
        {
          id: '2626',
          weight: '62',
          height: '172',
          time: '2017-05-03',
          name: '刘杰',
          city: '成都',
          cityDistrict: '王屋区',
          address: '成都市普陀区大石路',
          iDCardNo: '53266266262626',
        }
      ],
    }
   },
}
</script>
<style scoped lang="less">
.slash-table {
  padding: 50px;
}

.slash-table {
 ::v-deep  .el-table thead.is-group th {
        background: none;
        padding: 0px;
    }

    ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
        border-bottom: none;/*中间的横线去掉*/
    }

    ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
        text-align: right;/*上边文字靠右*/
    }

    ::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
        text-align: left;/*下边文字靠左*/
    }
	/*核心代码*/
    ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
        content: "";
        position: absolute;
        width: 1px;
        height: 100px;/*斜线的长度*/
        top: 0;
        left: 0;
        background-color: grey;
        opacity: 0.2;
        display: block;
        transform: rotate(-43deg);/*调整斜线的角度*/
        transform: rotate(-70deg);/*调整斜线的角度*/
        -webkit-transform-origin: top;
        transform-origin: top;
    }
	
    ::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
        content: "";
        position: absolute;
        width: 1px;
        height: 100px;/*斜线的长度*/
        bottom: 0;
        right: 0;
        background-color: grey;
        opacity: 0.2;
        display: block;
        transform: rotate(-45deg);/*调整斜线的角度*/
        transform: rotate(-70deg);/*调整斜线的角度*/
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
    }
    ::v-deep .el-table thead.is-group th{
        height: 27.4px;
    }

}
</style>

---

总结

这是第一次发文，希望能帮到大家。