长宁网站设计,wordpress微商授权,网页游戏排行榜 传奇,html模板在哪找如上所示#xff1a;
表格内的数据是#xff1a;当前班级所在名次段的人数 / 当前班级1至n名的累计人数 5/12 也就是 5/75
需要变更为#xff1a; 截至到当前名次段总人数#xff08;上次考试#xff09; / 截至到当前名次段总人数#xff08;本次考试#xff09…
如上所示
表格内的数据是当前班级所在名次段的人数 / 当前班级1至n名的累计人数 5/12 也就是 5/75
需要变更为 截至到当前名次段总人数上次考试 / 截至到当前名次段总人数本次考试 人数最多的班级 标红加粗人数最少的班级 标蓝加粗。 先说一下第一种的实现方式就是用这种笨办法也能实现 el-table:datarankDatastylewidth: 100%:header-cell-styleheaderStyleEventborderclasspptTable:cell-stylecellStyleel-table-column propl51A100 label51-100 aligncentertemplate slot-scopescopespan{{ scope.row.l51A100 }}/{{ scope.row.l1A50 scope.row.l51A100 }}/span/template/el-table-columnel-table-column propl401A450 label401-450 aligncentertemplate slot-scopescopespan{{ scope.row.l401A450 }}/{{scope.row.l1A50 scope.row.l51A100 scope.row.l101A150 scope.row.l151A200 scope.row.l201A250 scope.row.l251A300 scope.row.l301A350 scope.row.l351A400 scope.row.l401A450}}/span/template/el-table-column/el-table优化后的代码
templatedivp classpptTitle各班各名次段人数(年级所有人)/pel-table:datarankDatastylewidth: 100%:header-cell-styleheaderStyleEventborderclasspptTable:cell-stylecellStyleel-table-column propclassNo label班级 /el-table-columnel-table-columnv-for(item, index) in range:keyindex:propitem.value:labelitem.namealigncentertemplate slot-scopescopespan{{ scope.row[item.value] }}/{{ accumulate(index, scope.$index) }}/span/template/el-table-column/el-table/div
/templatescript
import { mixins } from ./mixins;
import _ from lodash;
export default {mixins: [mixins],props: {rankData: {type: Array,default: () []}},data() {return {};return {range: [{name: 1-50,value: l1A50},{name: 51-100,value: l51A100},{name: 101-150,value: l101A150},{name: 151-200,value: l151A200},{name: 201-250,value: l201A250},{name: 251-300,value: l251A300},{name: 301-350,value: l301A350},{name: 351-400,value: l351A400},{name: 401-450,value: l401A450}]};},computed: {rankArr() {let newRank _.cloneDeep(this.rankData);const accumulation newRank.map(v {delete v.classNo;return Object.values(v);});return accumulation;}},methods: {accumulate(index, columnIndex) {const countArr this.rankArr[columnIndex].slice(0, index 1);const sumByIndex countArr.reduce((prev, cur, i) {return prev cur;}, 0);return sumByIndex;}}
};
/script
style langscss scoped
.el-table {border: 1px solid #000;
}
/style关键代码 computed: { rankArr() { let newRank _.cloneDeep(this.rankData); const accumulation newRank.map(v { delete v.classNo; return Object.values(v); }); return accumulation; } }, methods: { accumulate(index, columnIndex) { const countArr this.rankArr[columnIndex].slice(0, index 1); const sumByIndex countArr.reduce((prev, cur, i) { return prev cur; }, 0); return sumByIndex; } } 页面使用 accumulate方法 template slot-scopescope span{{ scope.row[item.value] }}/{{ accumulate(index, scope.$index) }}/span /template 以上是第一版的实现方式
现在来说说更新需求后的实现方式:(这里稍微复杂的点在颜色) 截至到当前名次段总人数上次考试 / 截至到当前名次段总人数本次考试 人数最多的班级 标红加粗人数最少的班级 标蓝加粗。
templatediv styleheight: 100vhp classpptTitle各班各名次段人数变化(上次/本次)/pel-table:datarankDatastylewidth: 100%:header-cell-styleheaderStyleEventborderclasspptTable:cell-stylecellStyleel-table-column propclassNo label班级 /el-table-columnel-table-columnv-for(item, index) in range:keyindex:propitem.value:labelitem.namealigncentertemplate slot-scopescopespan :stylecomputedStyle(scope.row[item.label], item.label){{scope.row[item.label]}}/spanspan//spanspan :stylecomputedStyle(scope.row[item.value], item.value){{scope.row[item.value]}}/span/template/el-table-column/el-table/div
/templatescript
import { mixins } from ./mixins;
export default {mixins: [mixins],props: {rankData: {type: Array,default: () []}},data() {return {range: [{name: 1-50,value: before50,label: previousBefore50},{name: 1-100,value: before100,label: previousBefore100},{name: 1-150,value: before150,label: previousBefore150},{name: 1-200,value: before200,label: previousBefore200},{name: 1-250,value: before250,label: previousBefore250},{name: 1-300,value: before300,label: previousBefore300},{name: 1-350,value: before350,label: previousBefore350},{name: 1-400,value: before400,label: previousBefore400},{name: 1-450,value: before450,label: previousBefore450}]};},methods: {// 颜色computedStyle(value, prop) {const propData this.rankData.map(e e[prop]);// console.log(value, propData, prop);// console.log(Math.max.apply(null, propData), ll);const max Math.max.apply(null, propData);const min Math.min.apply(null, propData);if (value max) {return { color: red, fontWeight: bold };}if (value min) {return { color: blue, fontWeight: bold };}return {};}}
};
/script
style langscss scoped
.el-table {border: 1px solid #000;
}
/style完成如下
