官方文档中,el-progress 属性 percentage 可选值范围 0-100,超出会报错。
https://github.com/ElemeFE/element/blob/dev/packages/progress/src/progress.vue
但是,对于某些应用场景,可能并不适用。如目标设定,可能完成度超出目标设定,大于100%,但 element-ui 似乎并不认为这是一个 bug
https://github.com/ElemeFE/element/issues/7150
二次封装 el-progress。超出 100% 时,percentage ,传入100%。样式根据ui设定使用css处理。innerText 不展示, 自定义文本展示,如"120%"。
通过给 table 传入 span-method 方法可以实现合并行或列。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象:
spanMethod({ row, column, rowIndex, columnIndex }) {
return [ rowspan, colspan ];
// return {
// rowspan: 2,
// colspan: 1
// };
}
经尝试,合并单元格,对于不同业务场景,spanMethod 处理方式如下:
简单情况,可以通过四则运算处理:
如合并相同学科(三行一学科)
if (rowIndex % 3 === 0) {
return [3, 1];
} else {
return [0, 0];
}
spanArr: 处理合并单元格,保存第一列每行合并数目,如 [6,0,0,0,0,0,3,0,0,3,0,0,1],非0数字表示合并行数,0表示不显示
// 获取合并规则数组 spanArr
// data 后台数据
getSpanArr(data) {
let spanArr = [];
let pos; // 保存 spanArr 的索引
for (let i = 0; i < data.length; i++) {
if (i === 0) {
spanArr.push(1);
pos = 0;
} else {
// 判断当前元素与上一个元素,是否为同一个学科
if (data[i].subject === data[i - 1].subject) {
// 合并行数加 1
spanArr[pos] += 1;
// 该行不显示
spanArr.push(0);
} else {
// spanArr 数组中加 1
spanArr.push(1);
// 设置索引位置
pos = i;
}
}
}
return spanArr;
},
// 合并单元格
spanMethod({ row, column, rowIndex, columnIndex }) {
// 前三行,前两列合并
if (rowIndex === 0 || rowIndex === 1 || rowIndex === 2) {
if (columnIndex === 0) {
return [0, 0];
} else if (columnIndex === 1) {
return [1, 2];
}
} else if (columnIndex === 0) {
const row = this.spanArr[rowIndex];
const col = row > 0 ? 1 : 0;
return {
rowspan: row,
colspan: col
};
}
}
element-ui 可以通过嵌套 el-table-column 设置多级表头。但对于表头合并,并不支持。
spanMethod属性可以合并表内容,但不能合并表头。
https://github.com/ElemeFE/element/issues/9875
目前采用设定 render-header 属性,结合 css 处理,可以实现,目前没有找到更好的办法。
// 列标题 Label 区域渲染使用的 Function
renderHeader(h, { column, $index }) {
if (column.label === '学科') {
column.label = '学';
} else if (column.label === '学部') {
column.label = '部';
};
return column.label;
}