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

el-table合并单元格

news 2025/6/24 20:25:51

el-tabel数据结构
此处为this.rolePermitItemList
在这里插入图片描述

合并后的样式：
在这里插入图片描述

el-table-column 需要添加property字段，属性值同props，用来判断需要合并的字段


<el-table :data="rolePermitItemList" style="width: calc(100% );margin-top:10px; "max-height="550" border ref="tableBoxTwo" :span-method="arraySpanMethod"><el-table-column :label="item.name" v-for="(item) in tableFieldTwo" :key="item.value":width="item.width" :align="item.align" :property="item.value"><template slot="header"><div><span class="name">{{ item.name }}</span><span class="unit">{{ item.unit ? '(' + item.unit + ')' : '' }}</span></div></template><template slot-scope="scope"><span style="font-size: 14px;font-family: MicrosoftYaHei;color: #4D4C4F;">{{scope.row[item.value]|| '-'}}</span></template></el-table-column><el-table-column align="left" :property="'peizhi'"><template slot="header"><div style="display: flex;align-items: center;justify-content: center;"><span class="name">权限</span></div></template><template slot-scope="scope"><div class="flex-row-nowrap flex-justify-space-around"><el-checkbox v-model="scope.row.checked"@change="checkboxChange(scope.row, 'two')" :data-a="responsive">{{scope.row.operateName }}</el-checkbox></div></template></el-table-column></el-table>

//方法data(){return{mergeObj: {}, // 用来记录需要合并行的下标mergeArr: ['moduleName', 'pageName',], // 表格中的列名tableFieldTwo: [{name: "模块",unit: "",value: "moduleName",isNumber: false,},{name: "页面",unit: "",value: "pageName",isNumber: false,},{name: "子页面",unit: "",value: "childPageName",isNumber: false,},],}},getRolePermitItemList(roleId = '') {this.$api.getRolePermitItemList({ roleId: roleId }).then(res => {if (res.code = 200) {this.rolePermitItemList = res.datathis.rolePermitItemList.forEach(item => {item.checked = item.isChecked ? true : false})//拿到数据后调用getSpanArr，数据结构为el-table正常的listthis.getSpanArr(this.rolePermitItemList);}})},getSpanArr(data) {this.mergeArr.forEach((key, index1) => {let count = 0; // 用来记录需要合并行的起始位置this.mergeObj[key] = []; // 记录每一列的合并信息data.forEach((item, index) => {// index == 0表示数据为第一行，直接 push 一个 1if (index === 0) {this.mergeObj[key].push(1);} else {// 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位if (item[key] === data[index - 1][key]) {this.mergeObj[key][count] += 1;this.mergeObj[key].push(0);} else {// 如果当前行和上一行其值不相等 count = index; // 记录当前位置 this.mergeObj[key].push(1); // 重新push 一个 1}}})})// this.mergeObj.peizhi= this.mergeObj.moduleNameconsole.log('mergeObj', this.mergeObj,this.mergeArr)},arraySpanMethod({ row, column, rowIndex, columnIndex }) {// 判断列的属性if (this.mergeArr.indexOf(column.property) !== -1) {// 判断其值是不是为0 if (this.mergeObj[column.property][rowIndex]) {return [this.mergeObj[column.property][rowIndex], 1]} else {// 如果为0则为需要合并的行return [0, 0];}}},