table表格 ---合并单元格-Toy模板网

这篇具有很好参考价值的文章主要介绍了table表格 ---合并单元格。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、合并表头

第一种方法

利用table的 :header-cell-style属性

<el-table
        :data="tableData"
        height="400px"
        max-height="400px"
        size="small"
        :header-cell-style="headerStyle"
        fit
>

 methods: {
      headerStyle({ row, rowIndex }) {
        console.log(row, rowIndex);
        if (rowIndex == 0) {  // 把第1行的第2、3列变为占两行高度的表格
          row[1].rowSpan = 2;
          row[2].rowSpan = 2;
        }
        if (rowIndex == 1) { // 第2行的原本第2行的1、2、3、4列高度变成0
          row[1].rowSpan = 2;
          row[2].rowSpan = 3;
          row[3].rowSpan = 3;
          row[4].rowSpan = 3;
        }
      },
        //第二种办法
       headerStyle({ row, rowIndex }) {
         if (rowIndex === 1) {      //隐藏另外领两个头部单元格                       
            return { display: 'none' }
        }
      },
    },

第二种方法

利用官网提供的el-table-column互相嵌套

table合并单元格,vue.js,javascript,前端

2、普通单元格合并

利用table的:span-method属性文章来源地址https://www.toymoban.com/news/detail-724105.html

<el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      style="width: 100%"
>

methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        console.log(row,column,rowIndex,columnIndex);
        if (rowIndex  === 1) {  //第2行
          if (columnIndex === 2) {  //第3个开始
            return [2, 2];  //第一个参数是高,第二个参数是宽
          } else if (columnIndex === 1) { //第2个开始
            return [0, 0];
          }
        }
      },
}

到了这里，关于table表格 ---合并单元格的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！