啰嗦两句

怎么用了这么一个题目呢，是因为我的业务需要就是这样，迫于文笔垃圾且词穷，需要当题目。

业务需要 && 设计原型

业务需要应该不须要说，看设计图，大家应该都很明确啦。那我来简略说一下（唉，皮一下很开心）。表格数据中：

  • 第一列合并雷同名称的行，雷同名称数据项数量不固定。
  • 增加共计行，共计行名称占据两列单元格，合并居中
  • 共计行最初一个单元格，展现自定义内容，本需要中是进度条
    设计图如下，我把需要对应标上了

实现

先回顾element的合并行或列

很分明了，绑定一个办法，办法中实现咱们的合并行，而咱们需要中要合并的行的数量并不固定，所以不能间接复制官网的例子。

  computed: {    groupNum() {      // 获取需合并的数据名称      return new Set(this.data.map((o) => o.name));    }  },  methods: {      nameGroup(name) {        // 获取雷同名称的长度        return this.getData.filter((o) => o.name == name).length;      },      nameLen(name) {        const tmp = Array.from(this.groupNum);        let index = tmp.indexOf(name);        let len = 0;        for (let i = 0; i < index; i++) {          len += this.nameGroup(tmp[i]);        }        return len;      },      // 合并列      objectSpanMethod(data) {        const { row, column, rowIndex, columnIndex } = data;        if (columnIndex === 0) {         // 依据重名的数据长度，计算合并的单元格长度          const len = this.nameGroup(row.name);          let lenName = this.nameLen(row.name);          if (rowIndex === lenName) {            return {              rowspan: len, // 依据理论反复的名称合并，而不是像官网例子中写死合并2行              colspan: 1,            };          } else {            return {              rowspan: 0,              colspan: 0,            };          }        }      }  }

到这里，就实现咱们的需要第一项了。上面就是共计行。常规，温习下element的共计行

绑定一个getSummaries办法，用于自定义共计行的数据展现。
需要2：“共计”占据两列，合并并居中，这边参考网上实现，从款式上进行解决。暗藏第二列，让第一列colspan为2并居中。
需要3：最初一个单元格中搁置进度条。这边我的思考是从理论渲染构造中增加元素。思考到表格存在翻页状况，进度条的值存在变动，所以这块解决放在监听watch中。

watch: {    // 共计行的合并单元格    getData: {      async handler() {        await this.$nextTick(() => {          const tds = document.querySelectorAll(            "#table .el-table__footer-wrapper tr>td"          );          tds[0].colSpan = 2;          tds[0].style.textAlign = "center";          tds[1].style.display = "none";        });      },      immediate: true,    },    sums: {      async handler() { // 共计行的纠纷转化率        await this.$nextTick(() => {          const tds = document.querySelectorAll(            "#table .el-table__footer-wrapper tr>td .cell"          );          tds[4].innerHTML = `            <div class="scale-table">              <div class="plotting-scale" style="height:28px;width:auto">                <div class="plotting-scale-bg">                  <div class="plotting-scale-bar" id="bar"></div>                  <p class="plotting-scale-text" style="line-height: 28px">${this.sums[4]}%</p>                </div>              </div>            </div>         `;          document.getElementById("bar").style.width = this.sums[4] + "%";        });      },      immediate: true,      deep: true,    },    methods:{     // 共计      getSummaries(param) {        const { columns, data } = param;        columns.forEach((column, index) => {          if (index === 0) {            this.sums[index] = "共计";            return;          }          const values = data.map((item, index) => Number(item[column.property]));          if (index === 2 || index === 3) { // 计算评估总量和生成报告数            if (!values.every((value) => isNaN(value))) {              this.sums[index] = values.reduce((prev, curr) => {                const value = Number(curr);                if (!isNaN(value)) {                  return prev + curr;                } else {                  return prev;                }              }, 0);            }          } else if (index === 4) { // 计算纠纷转换率            let num1 = 0,              num2 = 0;            data.map((item) => {              num1 += item.num;              num2 += item.report;            });            this.sums[4] = (num2 / num1).toFixed(2) * 100;          }        });        return this.sums;      },    }

写完这篇文章当前，我感觉这整块的需要都不是很难，而后理论开发中，我也是推敲很久，网页开了一个又一个，关键词换了一批又一批。还是过于塌实，遇到问题，第一反馈就是搜寻，看看网上有没有现成的代码能够copy，copy完了进行下一个需要或者间接就实现我的项目了，没有后续的了解与反思。遇到需要，先剖析，能够不会写，然而要有思路，再逐个实际。加油，共勉！