快速查找问题: !!!出现格式错乱的问题可能是没有让被合并的单元格返回 [0,0]
碰到出现错乱的情况:
1.开始布局表格时(很容易发现有错乱)
2.表格里有一部分内容是for循环出来的,这种可能在缩放浏览器的时候出现错乱
接下来是保姆级别的用法,有需要的可以一观
目标样式
所有代码,重点就是objectSpanMethod方法,该方法详细注释都在代码里
<template>
<el-card style="width: 100%" shadow="never">
<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
<el-table-column prop="name" label="Name" />
<el-table-column prop="age" label="Age" />
<el-table-column prop="mother" label="Mother" />
<el-table-column prop="father" label="Father" />
</el-table>
</el-card>
</template>
<script setup>
/**
* 合并行或列的计算方式
* row: 当前单元格所在的行数据
* column: 当前单元格所在的列数据
* rowIndex: 当前单元格所在的行索引,从0开始
* columnIndex: 当前单元格所在的列索引,从0开始
* */
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
//列索引为2(第三列)或者列索引为3(第四列)
if (columnIndex === 2 || columnIndex === 3) {
//行索引为1(第二行)
if (rowIndex === 1) {
//从第三(四)列第二行开始,合并三行一列,
return [3, 1]; //这里提一句,从哪一格开始合并显示的就是哪一格,具体看数据中的father属性
}
//这句一定要加,被合并的表格需要返回0,0 不然格式可能会错乱
else if (rowIndex === 2 || rowIndex === 3) {
return [0, 0];
}
}
};
// 数据
const tableData = [
{
name: "小粉",
age: "12",
mother: "Emma",
father: "John"
},
{
name: "小红",
age: "12",
mother: "Anna",
father: "Bob"
},
{
name: "小绿",
age: "17",
mother: "Anna",
father: "Peter"
},
{
name: "小蓝",
age: "3",
mother: "Anna",
father: "Doe"
}
];
</script>
<style scoped>
table {
table-layout: fixed;
width: 100%;
border: 1px solid red;
}
</style>