赞
踩
使用el-table的span-method
属性控制合并行
- <el-table :data="tableData" :span-method="objectSpanMethod" stripe border v-loading="tableLoading">
- <el-table-column prop="oppositeName" label="客户" show-overflow-tooltip>
- <template #default="{ row }">
- <div :class="row.dataType == '2' || row.dataType == '3' ? 'name-total-cell' : ''">{{
- row.oppositeName
- }}</div>
- </template>
- </el-table-column>
- <el-table-column prop="goodsName" label="煤种" show-overflow-tooltip></el-table-column>
- <el-table-column prop="goodsPrice" label="单价(元)" show-overflow-tooltip></el-table-column>
- <el-table-column prop="trucSum" label="车数(辆)" show-overflow-tooltip></el-table-column>
- <el-table-column prop="tonSum" label="拉运吨数(吨)" show-overflow-tooltip></el-table-column>
- </el-table>
handleTableData
: 处理表格数据,将同一名称的数据进行组合objectSpanMethod
:合并单元格
- // data
- // 分页数据
- const pageData = ref({
- total: 0,
- page: 1,
- pageSize: 10,
- });
- let tableLoading = ref(false);
- let tableData = ref([]);
- let rowSpanArr = ref([]);
- interface SpanMethodProps {
- row: any;
- column: any;
- rowIndex: number;
- columnIndex: number;
- }
-
- // onMounted
- onMounted(() => {
- getTableData();
- });
-
- // methods
- // 获取表格数据
- const getTableData = (page?: number) => {
- tableLoading.value = true;
- if (page) {
- pageData.value.page = page;
- }
- let params = {...pageData.value};
- http
- .post('/smart-order-service/orderDispatchStatistics/orderDispatchStatistics', params)
- .then((res) => {
- if (res && res.data) {
- tableData.value = res.data || [];
- handleTableData(tableData.value);
- if (pageData.value.page === 1) pageData.value.total = res.data.total || 0;
- } else {
- tableData.value = [];
- pageData.value.total = 0;
- }
- })
- .finally(() => {
- tableLoading.value = false;
- });
- };
-
- // 获取相同名称的个数 tableData: 表格的数据, oppositeName: 确定相同的参数
- const handleTableData = (tableData: any) => {
- let rowSpanList = <any>[],
- position = 0;
- for (let [index, item] of tableData.entries()) {
- if (index == 0) {
- rowSpanList.push(1);
- position = 0;
- } else {
- if (item['oppositeName']) {
- if (item['oppositeName'] == tableData[index - 1]['oppositeName']) {
- rowSpanList[position] += 1; //项目名称相同,合并到同一个数组中
- rowSpanList.push(0);
- } else {
- rowSpanList.push(1);
- position = index;
- }
- } else {
- rowSpanList.push(1);
- position = index;
- }
- }
- }
- rowSpanArr.value = rowSpanList;
- };
- // 单元格的处理方法 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
- const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
- if (columnIndex === 0) {
- // 普通数据
- if (row.dataType == 1) {
- const rowSpan = rowSpanArr.value[rowIndex];
- return [rowSpan, 1];
- } else {
- // 小计
- if (row.dataType == 2) {
- row.oppositeName = '小计';
- return [1, 3];
- }
- // 总计
- if (row.dataType == 3) {
- row.oppositeName = '总计';
- return [1, 3];
- }
- }
- }
- if (columnIndex === 1 || columnIndex === 2) {
- if (row.dataType == 2 || row.dataType == 3) {
- return [0, 0];
- }
- }
- };
objectSpanMethod
原理:对每一个单元格返回一个[rowSpan, colSpan]
数组, rowSpan
表示当前单元格会展示的行数,colSpan
表示当前单元格会展示的列数,设置为0时当前单元格被消除。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。