vue实现刻度并且跟el-table对齐

<template>
  <div class="qualityTest">
    <div class="qualityTest_left">
      <div class="master_roll">
        <div class="title">大母卷</div>
        <span>坐标系</span>
      </div>
      <div class="result result_first">
        <div class="result_title">厚度值</div>
        <div class="result_list">
          <div class="result_list_left">
            <span>检验标准：</span>
            <span>上限<el-tag style="margin-left: 10px">10</el-tag></span>
            <span>下限<el-tag style="margin-left: 10px">20</el-tag></span>
          </div>
          <div class="result_list_right">
            <span>实测值</span>
            <span>结果</span>
          </div>
        </div>
      </div>
      <div class="result">
        <div class="result_title">透气值</div>
        <div class="result_list">
          <div class="result_list_left">
            <span>检验标准：</span>
            <span>上限<el-tag style="margin-left: 10px">10</el-tag></span>
            <span>下限<el-tag style="margin-left: 10px">20</el-tag></span>
          </div>
          <div class="result_list_right">
            <span>实测值</span>
            <span>结果</span>
          </div>
        </div>
      </div>
      <div class="result">
        <div class="result_title">面密度</div>
        <div class="result_list">
          <div class="result_list_left">
            <span>检验标准：</span>
            <span>上限<el-tag style="margin-left: 10px">10</el-tag></span>
            <span>下限<el-tag style="margin-left: 10px">20</el-tag></span>
          </div>
          <div class="result_list_right">
            <span>实测值</span>
            <span>结果</span>
          </div>
        </div>
      </div>
    </div>
    <div class="qualityTest_right">
      <div class="scale_box">
        <div class="scale_num" v-for="(item, index) in 75" :key="index">
          {{ index + 1 }}
        </div>
      </div>
      <div class="ruler" :style="{ minWidth: activeWidth + 'px' }">
        <div class="scal-line">
          <div class="scal-txt" id="txt"></div>
          <div class="exactly-ten"></div>
        </div>
      </div>
      <div
        class="table_box"
        :style="{ minWidth: activeWidth + 'px' }"
        v-for="(table, num) in 3"
        :key="num"
      >
        <el-table
          :data="tableData"
          :style="{ width: activeWidth + 'px' }"
          :header-cell-style="rowClass"
        >
          <el-table-column
            :label="list.name"
            align="center"
            v-for="(list, idx) in titleList"
            :key="idx"
          >
            <el-table-column
              prop="name"
              width="40"
              align="center"
              v-for="(item, index) in 8"
              :key="index"
            >
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'qualityTest',
  data () {
    return {
      titleList: [
        {
          name: '子卷1（785mm宽）',
        },
        {
          name: '子卷2（785mm宽）',
        },
        {
          name: '子卷3（785mm宽）',
        },
        {
          name: '子卷4（785mm宽）',
        }, {
          name: '子卷5（785mm宽）',
        },
        {
          name: '子卷6（785mm宽）',
        },
        {
          name: '子卷7（785mm宽）',
        },
        {
          name: '子卷8（785mm宽）',
        },
      ],
      tableData: [
        {
          name: 'xxx'
        },
        {
          name: 'xxx'
        },
      ],
      activeWidth: 75 * 40, // 表格的总宽度
    }
  },
  methods: {
    rowClass ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 1) {
        return {
          display: 'none'
        }
      }
    }
  },
  created () {

  },
  mounted () {
    let str = ''
    for (let i = 1; i < 73; i++) {
      str = str + `<span class="num">${i * 100}</span>`
    }
    let allTxt = '<span class="zero-num">0</span>' +
      str + '<span class="full-num">7300</span>'
    document.getElementById('txt').innerHTML = allTxt
  }
}
</script>

<style lang="scss" scoped>
.qualityTest {
  height: 100%;
  width: 100%;
  background: #fff;
  padding: 16px;
  display: flex;
  .qualityTest_left {
    width: 200px;
    flex-shrink: 0;
    height: 100%;
    // border-right: 1px solid #ccc;
    // margin-right: 12px;
    .master_roll {
      .title {
        height: 36px;
        border-bottom: 1px solid #000;
        margin-right: 10px;
        font-size: 18px;
        font-weight: 600;
      }
      span {
        font-size: 12px;
        float: right;
        line-height: 20px;
        margin-right: 10px;
      }
    }
    .result {
      height: 122px;
      margin-top: 40px;
      .result_title {
        height: 36px;
        border-bottom: 1px solid #ccc;
        margin-right: 10px;
        font-weight: 600;
        color: #1890ff;
      }
      .result_list {
        display: flex;
        justify-content: space-between;
        margin-right: 10px;
        .result_list_left {
          font-size: 14px;
          display: flex;
          flex-direction: column;
          > span {
            line-height: 24px;
            margin-right: 10px;
          }
        }
        .result_list_right {
          display: flex;
          flex-direction: column;
          > span {
            display: inline-block;
            height: 42px;
            font-size: 14px;
            line-height: 40px;
            border-bottom: 1px dashed #ccc;
          }
        }
      }
    }
    .result_first {
      margin-top: 75px;
    }
  }
  .qualityTest_right {
    height: 100%;
    width: calc(100% - 200px);
    overflow: auto;
    .ruler {
      min-width: 100%;
      height: 20px;
      margin-top: 50px;
      padding: 0 40px;
      .scal-line {
        position: relative;
        width: 100%;
        height: 16px;
        margin: 0 auto;
        background: linear-gradient(
          90deg,
          transparent 37%,
          #bbb 63%,
          transparent 63%
        );
        background-repeat: repeat-x;
        background-size: 4px 24px;
        background-position: 0 5px;
        .exactly-ten {
          position: absolute;
          left: 0;
          top: 0;
          width: 101%;
          height: 16px;
          background: linear-gradient(
            90deg,
            transparent 48%,
            #aaa 53%,
            transparent 53%
          );
          background-repeat: repeat-x;
          background-size: 40px 36px;
          background-position: 22px 0;
        }
        >>> .scal-txt {
          position: absolute;
          top: -18px;
          font-size: 12px;
          color: #ccc;
          left: -20px;
          .num {
            display: inline-block;
            width: 40px;
            text-align: center;
          }
          .zero-num {
            display: inline-block;
            width: 40px;
            text-align: center;
          }
          .full-num {
            display: inline-block;
            width: 20px;
          }
        }
      }
    }

    .scale_box {
      height: 36px;
      min-width: 100%;
      border-left: 1px dashed #000;
      border-right: 1px dashed #000;
      position: relative;
      display: flex;
      .scale_num {
        height: 36px;
        width: 40px;
        background: #f7f3f3;
        flex-shrink: 0;
        position: relative;
        border-right: 1px dashed #000; /* 设置刻度线样式 */
        border-top: 1px dashed #000;
        border-bottom: 1px dashed #000;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .scale_num::after {
        content: '100';
        position: absolute;
        bottom: -18px;
        left: -1px;
        right: -1px;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        text-align: center;
        font-size: 12px;
        height: 16px;
        padding-top: 3px;
      }
    }
    .table_box {
      padding: 0 40px;
      margin-top: 5px;
      margin-bottom: 40px;
    }
  }
}
</style>