相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门
但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rowspan 的参数需要自己做判断,根据数据的相同行(或列)进行合并;
我们先看下结果:
<template>
<div>
<el-table
v-loading="loading"
:data="tableData"
:span-method="objectSpanMethod"
border>
<!--班次-->
<el-table-column prop="line_name" :label="$t('ms_shift')" />
<!--班车类型-->
<el-table-column prop="audit_type_text" :label="$t('ms_bus_type')" />
<!--车辆类型-->
<el-table-column
prop="car_type_text"
:label="$t('page.operation.table.column_car_type_label')"
/>
<!--加班车线路-->
<el-table-column
prop="estimate_start_time"
:label="$t('page.operation.table.add_shuttle_route')"
/>
<!--网点名称-->
<el-table-column
prop="start_store_short_name"
:label="$t('page.quicktools.weightinfo_store_name')"
/>
<!--运载量/件装载率-->
<el-table-column
prop="capacity_text"
:label="$t('ms_bus_load_or_percent')"
/>
<!--发车时间-->
<el-table-column
prop="actual_start_time"
:label="$t('page.operation.table.column_departure_time_label')"
/>
<!--到车时间-->
<el-table-column
prop="estimate_end_time"
:label="$t('ms_expect_arrived_time')"
/>
<!--班车状态-->
<el-table-column prop="car_state_text" :label="$t('ms_bus_status')">
<template slot-scope="scope">
<el-button
round
size="mini"
:style="STATUSENUMSTYLE.get(scope.row.car_state_text)"
>{{ scope.row.car_state }}</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: 1,
start_store_short_name: "测试网点1",
actual_start_time: null,
audit_type_text: "普通加班车",
car_state_text: 1,
car_type_text: "6W6.5",
estimate_end_time: null,
estimate_start_time: null,
line_name: 12,
car_state: "通过"
},
{
id: 1,
start_store_short_name: "测试网点2",
actual_start_time: null,
audit_type_text: "普通加班车",
car_state_text: 12,
car_type_text: "6W6.5",
estimate_end_time: null,
estimate_start_time: null,
line_name: 12,
car_state: "通过"
},
{
id: 1,
start_store_short_name: "测试网点3",
actual_start_time: null,
audit_type_text: "普通加班车",
car_state_text: 12,
car_type_text: "6W6.5",
estimate_end_time: null,
estimate_start_time: null,
line_name: 12,
car_state: "通过"
},
{
id: 1,
start_store_short_name: "测试网点4",
actual_start_time: null,
audit_type_text: "普通加班车",
car_state_text: 12,
car_type_text: "6W6.5",
estimate_end_time: null,
estimate_start_time: null,
line_name: 12,
car_state: "通过"
}
],
spanArr: [4,0,0,0],
};
},
mounted(){
this.rowspan();
},
methods: {
rowspan() {
let position=0;
this.listData.forEach((item, index) => {
if (index === 0) {
this.spanArr.push(1);
position = 0;
} else {
if (this.listData[index].id=== this.listData[index - 1].id) {
this.spanArr[position] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
position = index;
}
}
});
},
/**
* @param row 当前行
* @param column 当前列
* @param rowIndex 当前行号,第几行
* @param columnIndex 当前列号
* @returns {{rowspan: number, colspan: number}}
*/
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex < 4) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
}
}
};
</script>
<style scope lang="less"></style>
详细说明:
:span-method="objectSpanMethod"
这个是官方给定的绑定属性和对应的方法,objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
row: 当前行
column: 当前列
rowIndex:当前行号
columnIndex :当前列号
该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
this.spanArr 数组 ,返回的是相对应的行合并行数
这个示例打印出的this.spanArr为 [3, 0, 0, 3, 0, 0],比如,第一个元素为3,表示第一行应该向下合并3行(即第一行的rowspan为3),第二个元素的rowspan为0,就让它“消失”。
rowspan()这个函数就是用来返回 this.spanArr 数组的,定义每一行的 rowspan
rowspan()函数,if( index === 0),第一行,直接先给数组push进一个1,表示自己先占一行,this.position是数组元素的位置(此时是从数组元素的第一个开始,所以this.position为0), this.position为0意思表示的就是数组的第一个元素。
当到了index为2的时候,if(this.listData[index].type === this.listData[index-1].type ),让第二行与第一行作比较,
如果第二行与第一行相等的话,this.position就+1,当有n行第一行相同,this.position就为n,表示向下合并n行;第二行自己就this.spanArr.push(0),表示第二行“消失”,因为第一行和第二行合并了啊。
如果第二行与第一行不相等的话,那么this.spanArr.push(1);就让第二行自己独占一行;this.position = index意思就是把指针拿到index这行来,表示设置数组this.spanArr[this.position]的元素值,然后定义从此行开始向下合并几行(可能这句话我表述的不是很清楚你可以根据我这个示例研究下,当index为3时,this.position为3,当index为4时,第四行与第三行需要合并,那么在数组的this.position元素就要+1了,也就是this.spanArr[this.position] += 1)
还有最后一句话
const _col = _row>0 ? 1 : 0;
定义的这一个单元格列的合并,我们项目只合并行,不合并列;
_row:代表合并行的行数,_row的值要么是1,或者更大的自然正整数,要么是0。
1代表:独占一行
更大的自然数:代表合并了若干行
0:代表“消失”的哪那一个单元格,后面的单元格向前推一格