el-tabel数据结构
此处为this.rolePermitItemList
合并后的样式：
文章来源：https://www.toymoban.com/news/detail-629622.html
el-table-column 需要添加property字段，属性值同props，用来判断需要合并的字段文章来源地址https://www.toymoban.com/news/detail-629622.html
<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.data
this.rolePermitItemList.forEach(item => {
item.checked = item.isChecked ? true : false
})
//拿到数据后调用getSpanArr，数据结构为el-table正常的list
this.getSpanArr(this.rolePermitItemList);
}
})
},
getSpanArr(data) {
this.mergeArr.forEach((key, index1) => {
let count = 0; // 用来记录需要合并行的起始位置
this.mergeObj[key] = []; // 记录每一列的合并信息
data.forEach((item, index) => {
// index == 0表示数据为第一行，直接 push 一个 1
if (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.moduleName
console.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];
}
}
},
到了这里，关于el-table合并单元格的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
