当前位置：首页 > news >正文

el-table合并单元格

news 2025/8/20 13:25:32

这个是后端返回的数据结构，按id字段，把相同内容的单元格的进行合并

<el-tableborderv-loading="tableLoading"element-loading-text="数据加载中":data="tableData":span-method="mergeRows":height="tableMaxHeight"><el-table-column type="selection" prop="index" width="55"></el-table-column><el-table-column label="序号" prop="index" width="50" fixed="left"></el-table-column><el-table-column label="单据编号" prop="documentCode" min-width="150" :show-overflow-tooltip="true" /><el-table-column label="单据类型" prop="documentType" :show-overflow-tooltip="true"><template slot-scope="scope"><dict-tag :options="dict.type.document_type" :value="scope.row.documentType"></dict-tag></template></el-table-column><el-table-column label="单据日期" prop="documentDate" min-width="120" :show-overflow-tooltip="true" /><el-table-column label="单据状态" prop="status" :show-overflow-tooltip="true"><template slot-scope="scope"><dict-tag :options="dict.type.document_status" :value="scope.row.status"></dict-tag></template></el-table-column><el-table-column label="物料编码" prop="partCode" min-width="100" :show-overflow-tooltip="true" /><el-table-column label="物料名称" prop="partName" :show-overflow-tooltip="true" /><el-table-column label="申购数量" prop="quantityNum" :show-overflow-tooltip="true" /><el-table-column label="项目主数据" prop="projectData" min-width="110" :show-overflow-tooltip="true" /><el-table-column label="项目名称" prop="projectName" :show-overflow-tooltip="true" /><el-table-column label="申请人员" prop="applicant" min-width="100" :show-overflow-tooltip="true" /><el-table-column label="申请部门" prop="deptName" min-width="120" :show-overflow-tooltip="true" /><el-table-column label="采购人员" prop="purchasePerson" min-width="120" :show-overflow-tooltip="true" /><el-table-column label="已转采购数" prop="convertedNum" min-width="110" :show-overflow-tooltip="true" /><el-table-column label="未转采购数" prop="unconvertedNum" min-width="110" :show-overflow-tooltip="true" /></el-table>

data() {return {//需要合并的字段mergeFields: ["index","documentCode","documentType","documentDate","status","applicant","deptName","purchasePerson","tool"],// 合并规则mergeRules: {},}
},
methods: {
/*** 计算合并规则* @param {String} groupKey 分组依据字段（这里用id）*/calcMergeRules(groupKey) {const rules = {};// 初始化需要合并的字段规则this.mergeFields.forEach((field) => (rules[field] = []));let sameCount = 1; // 相同id的连续行数this.tableData.forEach((row, index) => {if (index === 0) {// 第一行默认占1行this.mergeFields.forEach((field) => rules[field].push(1));} else {// 判断与上一行是否同组const isSameGroup = row[groupKey] === this.tableData[index - 1][groupKey];if (isSameGroup) {sameCount++;// 当前行设为0（不显示），上一行累加this.mergeFields.forEach((field) => {rules[field].push(0);rules[field][index - sameCount + 1] = sameCount;});} else {// 不同组则重置计数sameCount = 1;this.mergeFields.forEach((field) => rules[field].push(1));}}});return rules;},/*** 合并单元格方法*/mergeRows({ column, rowIndex }) {// 找到当前列对应的字段const field = column.property;// 如果是需要合并的字段，则应用规则if (this.mergeFields.includes(field)) {const rowspan = this.mergeRules[field][rowIndex];return { rowspan, colspan: rowspan > 0 ? 1 : 0 };}// 不需要合并的列返回默认值return { rowspan: 1, colspan: 1 };},// 调接口获取数据getList() {this.tableLoading = true;queryPurchaseReqList(this.queryParams).then((res) => {if (res.code === 200) {this.tableData = res.rows || [];this.total = res.total;this.tableLoading = false;// 初始化合并规则（按id分组）this.mergeRules = this.calcMergeRules("id");}}).catch((err) => null);},
}

效果