Table表格合并列 (element ui)

图片展示

 

html

<el-table
      :data="tableData"
      style="width: 100%"
      :span-method="objectSpanMethod">
      <el-table-column
        prop="date"
        label="时间"
        width="220"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        align="center">
      </el-table-column>
</el-table>

js

data() {
			return {
				rowSpanArr: [],
				position: 0,
				tableData: [{
					date: '周一',
					name: '王小虎'
				}, {
					date: '周一',
					name: '王小虎'
				}, {
					date: '周一',
					name: '王小虎'
				}, {
					date: '周一',
					name: '王小虎'
				}, {
					date: '周二',
					name: '王小虎'
				}, {
					date: '周二',
					name: '王小虎'
				}, {
					date: '周二',
					name: '王小虎'
				}, {
					date: '周二',
					name: '王小虎'
				}, {
					date: '周二',
					name: '王小虎'
				}, {
					date: '周二',
					name: '王小虎'
				}, {
					date: '周三',
					name: '王小虎'
				}, {
					date: '周三',
					name: '王小虎'
				}]
			}
		},
methods: {
             countRow() {
				this.rowSpanArr = [];
				this.tableData.forEach((item, index) => {
					if (index == 0) {
						this.rowSpanArr.push(1);
						this.position = 0;
					} else {
						if (this.tableData[index].date == this.tableData[index - 1].date) {
							this.rowSpanArr[this.position] += 1; //项目名称相同，合并到同一个数组中
							this.rowSpanArr.push(0);
							this.tableData[index].date = this.tableData[index - 1].date;
						} else {
							this.rowSpanArr.push(1);
							this.position = index;
						}
					}
				});
			},
			objectSpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex === 0) {
					const _row = this.rowSpanArr[rowIndex];
					return {
						rowspan: _row, //行
						colspan: 1 //列
					};

				}
			}

}