赞
踩
findIndexs(array) { /* @params:数组 return:一个包含重复序列,开始索引和结束索引的数组 如: [ {start:0;end:2 }, {start:3;end:5} ] */ let current = array[0]; let result = []; //返回结果 let startIndex = 0; for (let i = 1; i < array.length; i++) { if (array[i] != current) { result.push({ start: startIndex, end: i - 1 }); current = array[i]; startIndex = i; } } result.push({ start: startIndex, end: array.length - 1 }); return result; },
arraySpanMethod({ row, column, rowIndex, columnIndex }) { //部门行合并 for (let i = 0; i < this.deptGroups.length; i++) { if (columnIndex == 0) { //从第0列开始 if (rowIndex == this.deptGroups[i].start) { //行数=start return [this.deptGroups[i].end - this.deptGroups[i].start + 1, 1]; // 将start行的高度增加到end-start+1 } if ( rowIndex <= this.deptGroups[i].end && rowIndex > this.deptGroups[i].start ) { //将(start,end]的单元格都清除 return [0, 0]; } } } //项目列合并 for (let i = 0; i < this.indexGroups.length; i++) { //外层循环是行 for (let j = 0; j < this.indexGroups[i].length; j++) { //内层循环是每一行对应的重复元素数组,即findIndexs的返回值 if (rowIndex == i) { //从第i行开始 if (columnIndex == this.indexGroups[i][j].start + this.step) { //step为4,指定从第step列开始 return [ 1, this.indexGroups[i][j].end - this.indexGroups[i][j].start + 1, //同行合并一样 ]; } if ( columnIndex <= this.indexGroups[i][j].end + this.step && columnIndex > this.indexGroups[i][j].start + this.step ) { return [0, 0]; //消除合并的单元格 } } } } },
data(){ return { tableData: [ { dept: "产品研发部", name: "张三", area: "上海", identity: "正式员工", projectList: [ { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, ], }, { dept: "产品研发部", name: "李四", area: "北京", identity: "正式员工", projectList: [ { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目b" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, ], }, { dept: "需求组", name: "王五", area: "天津", identity: "正式员工", projectList: [ { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目b" }, { project: "项目b" }, { project: "项目c" }, { project: "项目c" }, { project: "项目c" }, { project: "项目d" }, { project: "项目d" }, { project: "项目d" }, { project: "项目a" }, ], }, { dept: "需求组", name: "李华", area: "天津", identity: "正式员工", projectList: [ { project: "项目a" }, { project: "项目b" }, { project: "项目c" }, { project: "项目d" }, { project: "项目e" }, { project: "项目f" }, { project: "项目g" }, { project: "项目h" }, { project: "项目i" }, { project: "项目j" }, { project: "项目k" }, { project: "项目l" }, ], }, { dept: "系统集成部", name: "李雷", area: "上海", identity: "正式员工", projectList: [ { project: "项目a" }, { project: "项目a" }, { project: "项目c" }, { project: "项目d" }, { project: "项目e" }, { project: "项目e" }, { project: "项目g" }, { project: "项目i" }, { project: "项目i" }, { project: "项目i" }, { project: "项目k" }, { project: "项目l" }, ], }, ], //表头 tabHeader: [ { prop: "dept", label: "部门", width: 180 }, { prop: "name", label: "姓名" }, { prop: "area", label: "所属地" }, { prop: "identity", label: "身份" }, { prop: "projectList[0].project", label: "2022.09" }, { prop: "projectList[1].project", label: "2022.10" }, { prop: "projectList[2].project", label: "2022.11" }, { prop: "projectList[3].project", label: "2022.12" }, { prop: "projectList[4].project", label: "2023.01" }, { prop: "projectList[5].project", label: "2023.02" }, { prop: "projectList[6].project", label: "2023.03" }, { prop: "projectList[7].project", label: "2023.04" }, { prop: "projectList[8].project", label: "2023.05" }, { prop: "projectList[9].project", label: "2023.06" }, { prop: "projectList[10].project", label: "2023.07" }, { prop: "projectList[11].project", label: "2023.08" }, ], indexGroups: [], // 生成的重复序列索引 deptGroups: [], //生成的重复部门序列 step: 4, //非月份列
<div> <!-- :span-method="arraySpanMethod" --> <el-table :data="tableData" border :span-method="arraySpanMethod" style="width: 100%" @cell-click="cellClick" > <el-table-column align="center" v-for="(item, index) in tabHeader" :key="index" :prop="item.prop" :label="item.label" :width="item.width" > </el-table-column> </el-table> </div> </template> <script> /* eslint-disable */ export default { name: "ManageFrontSystemRole", data() { return { tableData: [ { dept: "产品研发部", name: "张三", area: "上海", identity: "正式员工", projectList: [ { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, ], }, { dept: "产品研发部", name: "李四", area: "北京", identity: "正式员工", projectList: [ { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目b" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, ], }, { dept: "需求组", name: "王五", area: "天津", identity: "正式员工", projectList: [ { project: "项目a" }, { project: "项目a" }, { project: "项目a" }, { project: "项目b" }, { project: "项目b" }, { project: "项目c" }, { project: "项目c" }, { project: "项目c" }, { project: "项目d" }, { project: "项目d" }, { project: "项目d" }, { project: "项目a" }, ], }, { dept: "需求组", name: "李华", area: "天津", identity: "正式员工", projectList: [ { project: "项目a" }, { project: "项目b" }, { project: "项目c" }, { project: "项目d" }, { project: "项目e" }, { project: "项目f" }, { project: "项目g" }, { project: "项目h" }, { project: "项目i" }, { project: "项目j" }, { project: "项目k" }, { project: "项目l" }, ], }, { dept: "系统集成部", name: "李雷", area: "上海", identity: "正式员工", projectList: [ { project: "项目a" }, { project: "项目a" }, { project: "项目c" }, { project: "项目d" }, { project: "项目e" }, { project: "项目e" }, { project: "项目g" }, { project: "项目i" }, { project: "项目i" }, { project: "项目i" }, { project: "项目k" }, { project: "项目l" }, ], }, ], //表头 tabHeader: [ { prop: "dept", label: "部门", width: 180 }, { prop: "name", label: "姓名" }, { prop: "area", label: "所属地" }, { prop: "identity", label: "身份" }, { prop: "projectList[0].project", label: "2022.09" }, { prop: "projectList[1].project", label: "2022.10" }, { prop: "projectList[2].project", label: "2022.11" }, { prop: "projectList[3].project", label: "2022.12" }, { prop: "projectList[4].project", label: "2023.01" }, { prop: "projectList[5].project", label: "2023.02" }, { prop: "projectList[6].project", label: "2023.03" }, { prop: "projectList[7].project", label: "2023.04" }, { prop: "projectList[8].project", label: "2023.05" }, { prop: "projectList[9].project", label: "2023.06" }, { prop: "projectList[10].project", label: "2023.07" }, { prop: "projectList[11].project", label: "2023.08" }, ], indexGroups: [], // 生成的重复序列索引 deptGroups: [], //生成的重复部门序列 step: 4, //非月份列 }; }, created() { this.generateIndexGroups(this.tableData); this.deptGroups = this.findIndexs(this.tableData.map((i) => i.dept)); // console.log(this.deptGroups); }, mounted() {}, methods: { //单元格合并函数 arraySpanMethod({ row, column, rowIndex, columnIndex }) { //部门行合并 for (let i = 0; i < this.deptGroups.length; i++) { if (columnIndex == 0) { //从第0列开始 if (rowIndex == this.deptGroups[i].start) { //行数=start return [this.deptGroups[i].end - this.deptGroups[i].start + 1, 1]; // 将start行的高度增加到end-start+1 } if ( rowIndex <= this.deptGroups[i].end && rowIndex > this.deptGroups[i].start ) { //将(start,end]的单元格都清除 return [0, 0]; } } } //项目列合并 for (let i = 0; i < this.indexGroups.length; i++) { //外层循环是行 for (let j = 0; j < this.indexGroups[i].length; j++) { //内层循环是每一行对应的重复元素数组,即findIndexs的返回值 if (rowIndex == i) { //从第i行开始 if (columnIndex == this.indexGroups[i][j].start + this.step) { //step为4,指定从第step列开始 return [ 1, this.indexGroups[i][j].end - this.indexGroups[i][j].start + 1, //同行合并一样 ]; } if ( columnIndex <= this.indexGroups[i][j].end + this.step && columnIndex > this.indexGroups[i][j].start + this.step ) { return [0, 0]; //消除合并的单元格 } } } } }, //单元格点击 cellClick(row, column, cell, event) { alert(cell.textContent); }, //找出数组连续重复下标 findIndexs(array) { /* @params:数组 return:一个包含重复序列,开始索引和结束索引的数组 如: [ {start:0;end:2 }, {start:3;end:5} ] */ let current = array[0]; let result = []; //返回结果 let startIndex = 0; for (let i = 1; i < array.length; i++) { if (array[i] != current) { result.push({ start: startIndex, end: i - 1 }); current = array[i]; startIndex = i; } } result.push({ start: startIndex, end: array.length - 1 }); return result; }, //生成对应tabList结构的indexGroups generateIndexGroups(data) { let tmp = data.map((i) => i.projectList); let newPro = []; tmp.forEach((item) => { newPro.push(item.map((item) => item.project)); }); let result = newPro.map((item) => this.findIndexs(item)); this.indexGroups = result; }, }, }; </script> <style lang="scss" scoped></style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。