element ui 表格合并行和列

element ui 表格合并行和列

<el-table
  :data="tableData"
  :span-method="arraySpanMethod"
  border
  style="width: 100%"
>
	<el-table-column
	  v-for="col in columns"
	  :prop="col.dataIndex"
	  :key="col.dataIndex"
	  :label="col.title"
	  align="center"
	></el-table-column>
</el-table>

methods: {
	// 合并行或列
    arraySpanMethod({ row, rowIndex, columnIndex }) {
      // 合并的列（成一整行）
      if (row.colSpanRow) {
        if (rowIndex === rowIndex) { // 哪一行需要合并
          if (columnIndex === 1) { // 第二列的值保留
            return [1, 19]
          } else { // 其余隐藏
            return [0, 0]
          }
        }
      } else {
		// 第一列和第二列
        if (columnIndex === 1 || columnIndex === 0) {
          if (row.objIndex === 'col0') {
            // 合并的行
            return {
              rowspan: row.num,
              colspan: 1
            }
          } else {
            // 其余被合并子项隐藏
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    }
}