Vue.js中el-table表格合并笔记

1. 在el-table标签中使用:span-method属性来控制表格的行或者列合并，如下

<el-table 
	v-loading="loading" 
	:data="measurementList" 
	:span-method="objectSpanMethod" 
	row-key="id">
	<el-table-column label="编号" prop="code"></el-table-column>
</el-table>

同时需要添加vue方法，方法包含row、column、rowIndex、columnIndex四个属性，方法会返回一个对象，包含了rowspan和colspan两个属性，rowspan表示占用行数，colspan表示占用列数，如果两个值都为0表示不展示，方法如下

	objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.measurement.hasOwnProperty(column.property)) {
        if (rowIndex === 0) {
          return {
            rowspan: this.tableSize,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },

2. 在遇到表格中需要加input框的需求时，一般我们不会给el-table-column标签添加prop属性，但是如果需要合并表格，这个属性则必须加，如果不加，虽然column.property还是为name，但是无法对当前列表格进行合并操作，如下

<el-table 
	v-loading="loading" 
	:data="measurementList" 
	:span-method="objectSpanMethod" 
	row-key="id">
	<el-table-column label="编号" prop="code"></el-table-column>
	<el-table-column label="名称" prop="name">
		<template slot-scope="scope">
			<el-input type="text" v-model="scope.row.name"/>
		</template>
	</el-table-column>
</el-table>