1.在写展示表格的时候,需要把5行合并为一列;
以下为element-ui 官网文档:
<div>
<el-table
:data="tableData6"
:span-method="arraySpanMethod" // 把列合并为行
border
style="width: 100%">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
sortable
label="数值 1">
</el-table-column>
<el-table-column
prop="amount2"
sortable
label="数值 2">
</el-table-column>
<el-table-column
prop="amount3"
sortable
label="数值 3">
</el-table-column>
</el-table>
<el-table
:data="tableData6"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1(元)">
</el-table-column>
<el-table-column
prop="amount2"
label="数值 2(元)">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3(元)">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData6: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
},
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 把列合并为行
if (rowIndex % 2 === 0) { // 首先筛选行数 0 , 2 ,4
if (columnIndex === 0) { // 当列数为0,开始,
return [1, 2]; // 把2列合并为一行
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 把行合并为列数
if (columnIndex === 0) { // 第一列
if (rowIndex % 2 === 0) { // 行数为0,2,4
return {
rowspan: 2, // 把2行合并为一列
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
};
</script>
图片没有显示
2.我要实现的页面;
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 6) { // 首先第六列
// 把6行合并为一列
if (rowIndex === 0) { // 当第一行开始
// 从0行开始 把6行 合并为1列
return {
rowspan: 6,
colspan: 1
};
} else if (rowIndex === 6) { // 当第7行就为正常的一行;要返回 把1行合并为一列
return {
rowspan: 1,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
} else if (rowIndex === 7) {
// 把7列合并为一行
if (columnIndex === 0) {
return [1, 7];
}
}
},