Get the row height in the left column of an el-table that ADAPTS to the row height

Effect:

vue html:

Left progress bar:

<div class="track-rcol">
  <div class="track-left-list">
    <ul>
      <div v-for="(item,index) in peopleList" :key="index">
        <li :class="{first:item == 1,first3:item == 2,last:peopleList.length == index+1}" :style="{'padding-bottom':rowEleList[index]+'px'}">
          <div></div>
          <i class="node-icon"></i>
        </li>
      </div>
    </ul>
  </div>
</div>
Copy the code

Row height adaptive table:

<el-table ref="recordTableId">
......
</el-table>
Copy the code

js:

Description: PeopleList this.$refs. RecordTableId.$refs['bodyWrapper']. Children [0]. Children [1] This.$refs. RecordTableId.$refs['bodyWrapper'].children[0].children[1].children Holds an array of row heightsCopy the code
// Set the list of record list row heights; setRowEleList() { if (! this.peopleList || this.peopleList.length == 0 || ! this.$refs.recordTableId) { return } try { this.rowEleList = []; const rowEleList = this.$refs.recordTableId.$refs['bodyWrapper'].children[0].children[1].children; for (let index = 0; index < rowEleList.length; index++) { this.rowEleList[index] = rowEleList[index].clientHeight; } console.log(this.rowEleList); } catch (error) { console.log(error); } finally { } }Copy the code

scss:

.track-left-list { margin-top: 115px; position: relative; } .track-left-list li { position: relative; padding: 0px 0 40px 25px; line-height: 20px; border-left: 1px solid #d9d9d9; color: #999; } .track-left-list li.first { color: #999; padding-top: 0; width: 100%; text-align: left; border-left: 1px solid #67C23A; } .track-left-list li.last { border: 0px ! important; } .track-left-list li.first3 { color: #999; padding-top: 0; width: 100%; text-align: left; border-left: 1px solid #F56C6C; } .track-left-list li .node-icon { position: absolute; Left: 5.5 px; border-radius: 5px; width: 10px; height: 10px; top: 0; background-color: #d9d9d9; } .track-left-list li.first .node-icon { background-position: 0-72px; background-color: #67C23A; width: 20px; z-index: 2; height: 20px; position: absolute; left: -10px; top: 0; border-radius: 10px; } .track-left-list li.first2 .node-icon { background-position: 0-72px; background-color: #67C23A; width: 20px; z-index: 2; height: 20px; position: absolute; left: -10px; top: 0; border-radius: 10px; } .track-left-list li.first3 .node-icon { background-position: 0-72px; background-color: #F56C6C; width: 20px; z-index: 2; height: 20px; position: absolute; left: -10px; top: 0; border-radius: 10px; }Copy the code