vue+element ui table表格自定義合並表頭

1：使用范圍（個人理解）

對vue + element ui界面中table表格的表頭根據自己需求進行合並

2：實現原理：

table自帶合並屬性：rowSpan和colSpan，所以合並表頭的思路是：獲取所有的表頭單元格，針對性的對需要合並的單元格進行操作。

3：實現代碼

比如我們想要合並的是第二列和第三列，那么我們先獲取到所有的表頭，然后將第二列表頭的colSpsn設為2，將第三列表頭的display設為none。

data() {
    tableData: [
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1519 弄'
      }
    ],
},

methods: {
    setColSpan:function() {
      // console.log(document.getElementsByClassName("el-table__header"))
      // 獲取表頭的所有單元格
      var x = document.getElementsByClassName("el-table__header")[0].rows[0].cells
      // 將第二列表頭單元格的colSpan設為2
      x[1].colSpan = 2
      // 將第三列表頭單元格的display設為none
      x[2].style.display = 'none'
    },
},
mounted() {
    // 注意一定要保證DOM渲染完成后在進行合並操作，否則會找不到元素
    this.$nextTick(function(){
      this.setColSpan();
    })
}

原文鏈接：https://blog.csdn.net/weixin_43588821/article/details/109123467