基于饿了么（elementUI）UI组件分组表格（合并单元格）实现Demo
针对表格在实际业务场景中的合并单元格实现⽅式，初步思考，组织按着班级分组展⽰学⽣，并对不同班级进⾏相关操作，⽐如发短信等。<template>
<div>
<el-main class="contailer">
<el-table :data="tableData" :span-method="spanMethod">
<el-table-column prop="classId" label="班级ID"></el-table-column>
<el-table-column prop="className" label="班级名"></el-table-column>
<el-table-column prop="stuId" label="学号"></el-table-column>
<el-table-column prop="stuName" label="姓名"></el-table-column>
<el-table-column label="操作">
<template slot-scope="{row}">
<span @click="sendMsg(row.classId)">发短信</span>
</template></el-table-column>
</el-table>
</el-main>
</div>
</template>
<script>
export default {
data() {
return {
tableData:[  //班级学⽣信息mock数据，该数据假设已经按着班级信息进⾏排序
{classId:'001',className:'⼀班',stuId:1001,stuName:'zhangsan001'},
{classId:'001',className:'⼀班',stuId:1002,stuName:'zhangsan001'},
{classId:'001',className:'⼀班',stuId:1003,stuName:'zhangsan001'},
{classId:'002',className:'⼆班',stuId:1004,stuName:'zhangsan002'},
{classId:'002',className:'⼆班',stuId:1005,stuName:'zhangsan002'},
{classId:'003',className:'三班',stuId:1006,stuName:'zhangsan003'},
{classId:'003',className:'三班',stuId:1007,stuName:'zhangsan003'},
{classId:'003',className:'三班',stuId:1008,stuName:'zhangsan003'},
{classId:'004',className:'四班',stuId:1009,stuName:'zhangsan004'},
]
};
},
computed:{
groupNum(){  //获取班级列表数组
return new Set(this.tableData.map(o => o.className));
}
elementui登录界面
},
methods:{
classGroup(name){  //根据班级名称获取学⽣数量
return this.tableData.filter(o => o.className == name).length;
},
classNameLen(name){  //根据班级名称获取该班级第⼀个学⽣在全量学⽣中的偏移位置
const tmp = Array.upNum);
const index = tmp.indexOf(name);  //某班级在全班级中的偏移位置
let len = 0;
for (let i = 0;i < index;i++){
len += this.classGroup(tmp[i]);
}
return len;
},
sendMsg(classId){
    //do something
  },
spanMethod(data) {  //对于表格数据进⾏分组合并操作，UI组件回调函数
const {row,column,rowIndex,columnIndex} = data;
if (columnIndex < 2 || columnIndex > 3) {  //班级合并展⽰区
const len = this.classGroup(row.className);
const lenName = this.classNameLen(row.className);
if (rowIndex === lenName) {  //某班级⾸位学⽣⾏
return {
rowspan:len,
colspan:1
}
} else return {  //某班级⾮⾸位学⽣⾏
rowspan: 0,
colspan: 0
};
} else {  //学⽣信息展⽰区
return {
rowspan: 1,
colspan: 1
};
}
}
}
};
</script

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。