el-table 合并列

el-table 是一款基于 Element UI 的数据展示组件，它提供了丰富的表格功能，其中之一就是合并列。

合并列是指将表格中的连续若干列合并为一列，从而提高表格的可读性和美观性。为此，el-table 提供了三个相关的属性：span-method、header-transform 和 render-header。

span-method 是一个函数，用于指定哪些单元格需要进行合并。它的参数是当前单元格的行、列、单元格数据和数据源，返回值是一个包含 rowspan 和 colspan 属性的对象。例如，可以编写一个 spanMethod 函数来实现将第一列和第二列合并的效果：

<span-method :span-method="spanMethod"></span-method>

methods: {
  spanMethod({ row, column, rowIndex, columnIndex, data }) {
    if (columnIndex === 0) {
      // 第一列和第二列合并
      if (rowIndex === 0 || rowIndex === 2) {
        return {
          rowspan: 2,
          colspan: 2
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    } else {
      return {
        rowspan: 1,
        colspan: 1
      };
    }
  }
}

header-transform 是一个函数，用于处理表头的文本和样式。它的参数是当前单元格的列、行、单元格数据和数据源，返回值是一个对象，包含 text 和 style 两个属性。例如，可以编写一个 headerTransform 函数来实现将第一行的两个单元格合并为一个单元格的效果：

<header-cell :header-transform="headerTransform"></header-cell>

methods: {
  headerTransform({ row, column, rowIndex, columnIndex, data }) {
    if (rowIndex === 0 && columnIndex === 0) {
      return {
        text: '第一行合并',
        style: { textAlign: 'center', backgroundColor: '#f2f2f2' }
      };
    } else if (rowIndex === 0 && columnIndex === 1) {
      return {
        text: '',
        style: { display: 'none' }
      };
    } else {
      return {
        text: column.label,
        style: { textAlign: 'center', backgroundColor: '#f2f2f2' }
      };
    }
  }
}

render-header 是一个函数，用于渲染表头的内容。它的参数是当前列的列对象，返回值是一个包含表头内容的 VNode。例如，可以编写一个 renderHeader 函数来实现将第二列的表头内容垂直居中的效果：

<el-table-column prop="name" label="名称">
  <template slot="header" slot-scope="{ column }">
    {{ column.label }}
    <div style="display: inline-block; height: 100%; vertical-align: middle;"></div>
  </template>
</el-table-column>

methods: {
  renderHeader(h, { column }) {
    return h('div', { style: { textAlign: 'center' } }, [
      column.label,
      h('div', {
        style: { display: 'inline-block', height: '100%', verticalAlign: 'middle' }
      })
    ]);
  }
}

综上所述，el-table 提供了强大的合并列功能，让我们可以轻松地实现各种表格布局需求。