网站开发建设合同范本,阳西住房和城乡规划建设局网站,7天精通网站建设实录简介242,无人在线观看高清视频单曲播放Element-UI组件el-table用于展示多条结构类似的数据#xff0c;可对数据进行排序、筛选、对比或其他自定义操作。将使用到以下两项#xff0c;来完成今天demo演示#xff1a;多级表头#xff1a;数据结构比较复杂的时候#xff0c;可使用多级表头来展现数据的层次关系。合…Element-UI组件el-table用于展示多条结构类似的数据可对数据进行排序、筛选、对比或其他自定义操作。将使用到以下两项来完成今天demo演示多级表头数据结构比较复杂的时候可使用多级表头来展现数据的层次关系。合并行或列多行或多列共用一个数据时可以合并行或列。官方文档地址https://element.eleme.cn/#/zh-CN/component/table需要实现的表格如下图一、安装element-ui使用npm进行安装npm i element-ui -S二、表头实现这里表头实现比较简单代码如下templatedivel-table :datatableStudentData :span-methodreconstructionStuCell stylewidth: 100%el-table-column typeindex label序号 width50/el-table-columnel-table-column propname label姓名 width80/el-table-columnel-table-column label科目信息el-table-column propcourseName label科目 width80/el-table-columnel-table-column propdate label日期 width80/el-table-columnel-table-column proptimeStr label考试时间 width100/el-table-column/el-table-columnel-table-column label成绩信息el-table-column propscore label成绩 width60/el-table-columnel-table-column propscoreTotal label总分 width60/el-table-columnel-table-column proptotal label满分 width60/el-table-columnel-table-column proptotalAll label满分总分 width100template slot-scopescopespan v-ifscope.row.totalAll{{scope.row.totalAll}} 及格率{{parseInt(scope.row.scoreTotal/scope.row.totalAll*100)}}%/span/template/el-table-column/el-table-column/el-table/div
/templatescriptexport default {data(){return {tableData: [],tableStudentData: []}},created() {},methods: {/*** 合并单元格数据*/reconstructionStuCell({ row, column, rowIndex, columnIndex }){}//end}}
/scriptstyle langscss/style此时表头效果已形成如下图三、数据渲染数据渲染这里较为复杂这里为方便大家理解进行逐步拆解叙述。如有更好方法也欢迎大家指点。3.1 模拟数据如上图在element-table目录中新建data.js文件用于存储模拟数据代码如下export const studentData [{name: 李四, subject: [{courseName: 语文, date: 20日, timeStr: 09:00~11:30, score: 90, total: 150},{courseName: 政治, date: 20日, timeStr: 14:30~16:30, score: 70, total: 100},{courseName: 数学, date: 21日, timeStr: 09:00~11:30, score: 100, total: 150},{courseName: 历史, date: 21日, timeStr: 14:30~16:30, score: 72, total: 100},{courseName: 英语, date: 22日, timeStr: 09:00~11:30, score: 95, total: 150},]},{name: 王五, subject: [{courseName: 语文, date: 20日, timeStr: 09:00~11:30, score: 85, total: 150},{courseName: 政治, date: 20日, timeStr: 14:30~16:30, score: 60, total: 100},{courseName: 数学, date: 21日, timeStr: 09:00~11:30, score: 90, total: 150},{courseName: 历史, date: 21日, timeStr: 14:30~16:30, score: 68, total: 100},{courseName: 英语, date: 22日, timeStr: 09:00~11:30, score: 75, total: 150},]},{name: 小美, subject: [{courseName: 语文, date: 20日, timeStr: 09:00~11:30, score: 120, total: 150},{courseName: 政治, date: 20日, timeStr: 14:30~16:30, score: 85, total: 100},{courseName: 数学, date: 21日, timeStr: 09:00~11:30, score: 120, total: 150},{courseName: 历史, date: 21日, timeStr: 14:30~16:30, score: 80, total: 100},{courseName: 英语, date: 22日, timeStr: 09:00~11:30, score: 130, total: 150},]}
];页面中引入模拟数据并赋值给表格的变量代码如下scriptimport { studentData } from ./data.jsexport default {data(){return {tableStudentData: studentData}},created() { },methods: {/*** 合并单元格数据*/reconstructionStuCell({ row, column, rowIndex, columnIndex }){}//end}}
/script此时表格中可以正常渲染出部分数据了效果图如下3.2 数据处理如上图会发现科目和成绩相关信息未显示出来。这里需要对数据进行处理下将所有科目信息调整到 和姓名字段为同一行数据中。需要做以下几步将subject二级数据全部移至name同级的同一行数据中。将name字段原数据移至subject的第一行数据中item和sub进行合并。无subject子项数据的保持原数据输出。在data.js中添加重构数据reconstructionStuData()函数代码如下/*** 重构学生数据 并返回*/
export const reconstructionStuData data {if(!Array.isArray(data)) return [];let tmpData [];data.forEach((item, i) {//有二级数据的进行处理if(Array.isArray(item.subject)item.subject.length0){//循环成绩item.subject.forEach((sub, j) {let subData {};if(j0){//子项第一行数据和姓名信息同行subData Object.assign({ }, item, sub);}//其他行数据无须添加 姓名字段信息第一行数据会合并到结束位置填充后也会被覆盖else{subData Object.assign({ }, sub);}//if endtmpData.push( subData );});}//subject无子项数据保留当前位置输出else{tmpData.push(Object.assign({ }, item));}});return tmpData;
}引入reconstructionStuData()函数代码如下scriptimport { reconstructionStuData, studentData } from ./data.jsexport default {data(){return {tableStudentData: studentData}},created() {this.tableStudentData reconstructionStuData(studentData);},methods: {/*** 合并单元格数据*/reconstructionStuCell({ row, column, rowIndex, columnIndex }){}//end}}
/script此时表格效果图如下3.4 图解如上图列姓名位于列的第1位置起始从0开始所以序号为第0位置往下合并subject数组长度位置即可。列总分位于列的第6位置往下合并subject数组长度位置即可。列满分总分位于列的第8位置往下合并subject数组长度位置即可。这是我们会发现methods中定义的reconstructionStuCell()函数还未使用通过给table传入span-method方法可以实现合并行或列方法的参数是一个对象里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组第一个元素代表rowspan第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。这里我们添加以下逻辑在每行数据中添加姓名、总分满分总分对应columnIndex1、columnIndex6、columnIndex8字段用来存储需要返回的colspan和rowspan数据代码如下reconstructionStuCell({ row, column, rowIndex, columnIndex }){let column1Data row[columnIndex1];let column6Data row[columnIndex6];let column8Data row[columnIndex8];//判断条件满足情况下返回对应的rowspan和colspan数据if((column1Datacolumn1Data.columnIndexcolumnIndex) || //姓名组合并(column6Datacolumn6Data.columnIndexcolumnIndex) || //总分组合并column8Datacolumn8Data.columnIndexcolumnIndex //满分总分组合并){return {rowspan: column1Data.rowspan,colspan: column1Data.colspan}}//if end}以上代码添加后发现表格并无任何变化这是因为重构数据函数中还未添加对应的columnIndex1、columnIndex6、columnIndex8字段。3.5 合并列 - 姓名首先我们来合并姓名这列数据将每行数据中添加columnIndex1子属性变量columnIndex表示合并对应的列位置。subject有子项数据除第一行数据后面所有rowspan和colspan为0表示无需渲染该单元格第一行数据会向下合并并渲染填补空缺位置。subject无子项数据rowspan和colspan为1保留原位置渲染。如为0则当前单元格不被渲染表格会错乱。 代码如下export const reconstructionStuData data {if(!Array.isArray(data)) return [];let tmpData [];data.forEach((item, i) {//有二级数据的进行处理if(Array.isArray(item.subject)item.subject.length0){//循环成绩item.subject.forEach((sub, j) {let subData {};if(j0){//子项第一行数据和姓名信息同行subData Object.assign({ columnIndex1: { columnIndex: 1, rowspan: item.subject.length, colspan: 1 } }, item, sub);}//其他行数据无须添加 姓名字段信息第一行数据会合并到结束位置填充后也会被覆盖else{subData Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 0, colspan: 0 } }, sub);}//if endtmpData.push( subData );});}//无子项数据保留当前位置输出else{tmpData.push(Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 1, colspan: 1 } }, item));}});return tmpData;
}此时大家看到表格的姓名列已合并到对应长度效果图如下3.6 合并列 - 总分和满分总分总分和满分总分合并部分和姓名列同理但多出一步则需计算出对应科目的总分 和 所有科目的满分总分。增加第6列和第8列合并数据columnIndex6和columnIndex8并新增scoreTotal和totalAll分别保存总分和满分总分结果。代码如下export const reconstructionStuData data {if(!Array.isArray(data)) return [];let tmpData [];data.forEach((item, i) {//有二级数据的进行处理if(Array.isArray(item.subject)item.subject.length0){//循环成绩item.subject.forEach((sub, j) {let subData {};if(j0){//子项第一行数据和姓名信息同行subData Object.assign({ columnIndex1: { columnIndex: 1, rowspan: item.subject.length, colspan: 1 } }, item, sub);//计算总分subData[scoreTotal] item.subject.reduce((total, value) {return total value.score;}, 0);subData[columnIndex6] { columnIndex: 6, rowspan: item.subject.length, colspan: 1 };//计算满分总分subData[totalAll] item.subject.reduce((total, value) {return total value.total;}, 0);subData[columnIndex8] { columnIndex: 8, rowspan: item.subject.length, colspan: 1 };}//其他行数据无须添加 姓名字段信息第一行数据会合并到结束位置填充后也会被覆盖else{subData Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 0, colspan: 0 } }, sub);//总分和满分总分 被合并部分单元格填写为0subData[columnIndex6] { columnIndex: 6, rowspan: 0, colspan: 0 };subData[columnIndex8] { columnIndex: 8, rowspan: 0, colspan: 0 };}//if endtmpData.push( subData );});}//无子项数据保留当前位置输出else{tmpData.push(Object.assign({ columnIndex1: { columnIndex: 1, rowspan: 1, colspan: 1 } }, item));}});return tmpData;
}此时咱们需要的表格就被渲染出来了如下图这里reconstructionStuData()函数处理能力还是相对不足只能处理特定的表格合并。希望对大家有所帮助仅供大家参考
