element UI 给el-table组件的selection多选框添加 页面显示索引

今天写个后台管理系统的时候 出现了一个这样的需求 给el-table组件的每一个selection添加一个索引

 具体效果是这样的 。

于是，我立马去element Ui 他们家的官网去看了下 有木有具体的操作实例，，，结果可想而知 并没有，只是告诉我们得使用  type的selection 才会出现多选框

 <el-table-column type="selection" align="center" width="55" />

 于是我想 既然组件没有具体属性更改 那我们直接 操作dom节点好了

 addTableIndex() {
      
      let table = document.querySelector(".el-table__body-wrapper");
      let tableSelect = table.getElementsByClassName(
        "el-table-column--selection"
      );

      var arr = Array.from(tableSelect);
      arr.forEach((item, index) => {
        if (item.childNodes.length == 2) {
          item.removeChild(item.lastChild);
        }
        let span = document.createElement("span");
        span.innerText = index + 1;
        item.appendChild(span);
      });
    },

 但是要注意的是 这个方法 得放在updated 钩子中  在 每次数据变化的时候 实时去 获取页面中table 当中关于 selection 多选框的 class 添加dom节点 来实现 添加索引值