el-table表格动态高度，以及点击每一行加高亮

<template>
  <div class="tody-work-order">
    <div class="top" ref="top">
      <el-table
        :data="topTableData"
        :height="tableHeight"
        v-if="tableHeight"
        :destroy-on-close="true"
        :cell-style="{padding:'0px 0 0px 0', color: '#000'}"
        :header-cell-style="{padding: '0px 0 0px 0', color: '#000'}"
        @row-click="clickData"
        :row-class-name="tableRowClassName"
        style="width: 100%;">
        <el-table-column
          prop="date"
          label="序号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="工序名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="项目WBS">
        </el-table-column>
        <el-table-column
          prop="car"
          label="车型"
          align="center">
        </el-table-column>
        <el-table-column
          prop="carCode"
          label="车号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="lu"
          label="局段"
          align="center">
        </el-table-column>
        <el-table-column
          prop="time"
          label="计划时间"
          width="130"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tody-work-order',
  data () {
    return {
      activeIndex: 0,
      tableHeight: null,
      topTableData: [
        {
          date: '1',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '3',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '4',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '5',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '6',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '7',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        },
        {
          date: '2',
          name: 'xxx',
          address: '123',
          car: 'Y321',
          carCode: '2989',
          lu: '成都段',
          time: '2023/12/1',
          status: '完成'
        }
      ]
    }
  },
  created () {
    this.getTableHeight()
  },
  mounted () {
    const _this = this
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag)
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight()
        _this.resizeFlag = null
      }, 100)
    }
  },
  methods: {
    // 计算table高度(动态设置table高度)
    getTableHeight () {
      const tableH = 50 // 距离页面下方的高度
      const tableHeightDetil = window.innerHeight - tableH
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300
      } else {
        this.tableHeight = window.innerHeight - tableH
      }
    },
    tableRowClassName ({ row, rowIndex }) {
      row.index = rowIndex // 浅拷贝，让row有index
      if (rowIndex === this.activeIndex) {
        return 'success-row'
      }
    },
    clickData (row) {
      this.activeIndex = row.index
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/el_table.scss';
.tody-work-order {
  @include wh(100%, 100%);
  .top {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid $borderColor;
  }
}
::v-deep .el-table .success-row {
  background: pink !important;
}
</style>

如图：