el-table单元格合并
el-table单元格合并的关键是el-table的
span-method
属性,本文将讲解一下我在单元格合并的思路,本人前端小白,可能有理解错误仅供参考,本文重点介绍思路,毕竟每个人需求不一样
注意:有时候不需要单元格合并,可以使用插槽
前提
单元格的合并必须得有数据,所以应该先准备好合并前的数据,在有数据的基础上做
减法
-
合并前 –
每一行的数据都是双份的
这样虽然数据变多了,但是给了我们操作行的空间 -
合并后
其中一行被合并就看不见了
-
分析 需要合并三个部分
表头合并
在el-table中嵌套使用el-table-column即可实现多级表头、列的数据放在最底层el-table-column
什么是最底层的column-table-column呢?
表头和数据结合应该是这样
<template>
<div>
<el-table :data="data" border>
<!-- 第一列 -->
<el-table-column label="进粉日期" prop="column1" align="center"></el-table-column>
<!-- 第二列 -->
<el-table-column label="广告费" prop="column2" align="center"></el-table-column>
<!-- 第三列 -->
<el-table-column label="线索数" prop="column3" align="center"></el-table-column>
<!-- 第四列 第一层-->
<el-table-column label="2022-12" align="center">
<!-- 第四列第二层 -->
<el-table-column label="发货总金额" align="center">
<!-- 第四列第三层-1 -->
<el-table-column label="单数" prop="column4" align="center"></el-table-column>
<!-- 第四列第三层-2 -->
<el-table-column label="线索单产" prop="column5" align="center"></el-table-column>
<!-- 第四列第三层-3 -->
<el-table-column label="广告会产率" prop="column6" align="center"></el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
let data = ref([]);
data.value = [
{ column1:'2023-01-01',column2:'10',column3:'100',column4:'1000',column5:'1',column6:'1',column7:"111" },
{ column1:'2023-01-01',column2:'10',column3:'100',column4:'1000',column5:'1',column6:'1',column7:"111" },
{ column1:'2023-02-02',column2:'20',column3:'200',column4:'2000',column5:'2',column6:'2',column7:"222" },
{ column1:'2023-02-02',column2:'20',column3:'200',column4:'2000',column5:'2',column6:'2',column7:"222" },
{ column1:'2023-03-03',column2:'30',column3:'300',column4:'3000',column5:'3',column6:'3',column7:"333" },
{ column1:'2023-03-03',column2:'30',column3:'300',column4:'3000',column5:'3',column6:'3',column7:"333" },
];
</script>
合并行
我们在上面代码的基础上对前三列进行行合并,偶数行是保留的行,奇数行将被隐藏
// el-table :span-method="spanMethods"
function spanMethods({ row, column, rowIndex, columnIndex }) {
let _row = 0;
let _col = 0;
// 前三列
if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
if (rowIndex % 2 == 0) {
_row = 2; // 偶数行 两行
_col = 1;
} else {
_row = 0; // 奇数行 0行
_col = 1;
}
return {
rowspan: _row,
colspan: _col,
};
}
}
合并列
这里的列合并其实是将
偶数行的第4列扩展、第5和6列合并
// 第四列
if (columnIndex == 3) {
if (rowIndex % 2 == 0) {
// 偶数行时
_row = 1;
_col = 3; // 跨三列
return {
rowspan: _row,
colspan: _col,
};
}
}
// 第五、六列
if (columnIndex == 4 || columnIndex == 5) {
if (rowIndex % 2 == 0) {
// 偶数行时
_row = 1;
_col = 0; // 跨0列
return {
rowspan: _row,
colspan: _col,
};
}
}
现在有一个问题,现在发货总金额和单数用的其实是一组数据,需要去表格模板中修改文章来源:https://www.toymoban.com/news/detail-523034.html
<!-- 第四列第三层-1 -->
<el-table-column label="单数" prop="column4" align="center">
<!-- 这里需要特殊处理 -->
<template #default="scope">
<!-- 偶数行 -->
<span v-if="scope.$index % 2 == 0">{{ scope.row.column7 }}</span>
<!-- 奇数行 -->
<span v-else>{{ scope.row.column4 }}</span>
</template>
</el-table-column>
文章来源地址https://www.toymoban.com/news/detail-523034.html
完整代码
<template>
<div>
<el-table :data="data" :span-method="spanMethods" border>
<!-- 第一列 -->
<el-table-column label="进粉日期" prop="column1" align="center"></el-table-column>
<!-- 第二列 -->
<el-table-column label="广告费" prop="column2" align="center"></el-table-column>
<!-- 第三列 -->
<el-table-column label="线索数" prop="column3" align="center"></el-table-column>
<!-- 第四列 第一层-->
<el-table-column label="2022-12" align="center">
<!-- 第四列第二层 -->
<el-table-column label="发货总金额" align="center">
<!-- 第四列第三层-1 -->
<el-table-column label="单数" prop="column4" align="center">
<!-- 这里需要特殊处理 -->
<template #default="scope">
<!-- 偶数行 -->
<span v-if="scope.$index % 2 == 0">{{ scope.row.column7 }}</span>
<!-- 奇数行 -->
<span v-else>{{ scope.row.column4 }}</span>
</template>
</el-table-column>
<!-- 第四列第三层-2 -->
<el-table-column label="线索单产" prop="column5" align="center"></el-table-column>
<!-- 第四列第三层-3 -->
<el-table-column label="广告会产率" prop="column6" align="center"></el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script setup>
import {
ref,
reactive
} from "vue";
let data = ref([]);
data.value = [
{ column1:'2023-01-01',column2:'10',column3:'100',column4:'1000',column5:'1',column6:'1',column7:"111" },
{ column1:'2023-01-01',column2:'10',column3:'100',column4:'1000',column5:'1',column6:'1',column7:"111" },
{ column1:'2023-02-02',column2:'20',column3:'200',column4:'2000',column5:'2',column6:'2',column7:"222" },
{ column1:'2023-02-02',column2:'20',column3:'200',column4:'2000',column5:'2',column6:'2',column7:"222" },
{ column1:'2023-03-03',column2:'30',column3:'300',column4:'3000',column5:'3',column6:'3',column7:"333" },
{ column1:'2023-03-03',column2:'30',column3:'300',column4:'3000',column5:'3',column6:'3',column7:"333" },
];
function spanMethods({
row,
column,
rowIndex,
columnIndex
}) {
let _row = 0;
let _col = 0;
// 前三列
if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2) {
if (rowIndex % 2 == 0) {
_row = 2; // 偶数行 两行
_col = 1;
} else {
_row = 0; // 奇数行 0行
_col = 1;
}
return {
rowspan: _row,
colspan: _col,
};
}
// 第四列
if (columnIndex == 3) {
if (rowIndex % 2 == 0) {
// 偶数行时
_row = 1;
_col = 3; // 跨三列
return {
rowspan: _row,
colspan: _col,
};
}
}
// 第五、六列
if (columnIndex == 4 || columnIndex == 5) {
if (rowIndex % 2 == 0) {
// 偶数行时
_row = 1;
_col = 0; // 跨0列
return {
rowspan: _row,
colspan: _col,
};
}
}
}
</script>
到了这里,关于el-table单元格合并思路的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!