element-ui 组件使用中遇到的问题

el-progress percentage 超过100%

官方文档中，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%"。

el-table 合并单元格

通过给 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;
}