elementUI el-table内容自动滚动方案（二）vue-seamless-scroll

table父组件

<template>
    <div class="scroll_table">
      <div style="display: inline-block; width: 100%" v-if="wrapScroll">
        <el-table :data="data" class="table">
          <el-table-column
            v-for="(item,index) in columns"
            :key="index+'i'"
            :label="item.label"
            :prop="item.prop"
          ></el-table-column>
        </el-table>
        <baseScroll

          :listData="data"
          :limitMoveNum="data.length"
          class="seamless-warp"
        >
          <el-table
            v-if="showt"
            v-bind="$attr"
            :data="data"
            :border="border"
            :stripe="stripe"
            height="100%"
            class="cus-table"
            style="width: 100%">
            <el-table-column v-if="colIndex" label="序号" type="index" width="66" align="center" ></el-table-column>
            <child :headAlign="headAlign" :subHeadAlign="subHeadAlign"  v-for="(item,index) in columns" :key="index" :col="item">
              <template #cusSlotScope="{row,cols}">
                <slot :data="row" :name="cols.slotName"></slot>
              </template>
            </child>
            <slot></slot>
          </el-table>
        </baseScroll>

      </div>
      <el-table
        v-else
        v-bind="$attr"
        :data="data"
        :border="border"
        :stripe="stripe"
        height="100%"
        class="cus-table"
        style="width: 100%">
        <el-table-column v-if="colIndex" label="序号" type="index" width="66" align="center" ></el-table-column>
        <child :headAlign="headAlign" :subHeadAlign="subHeadAlign"  v-for="(item,index) in columns" :key="index" :col="item">
          <template #cusSlotScope="{row,cols}">
            <slot :data="row" :name="cols.slotName"></slot>
          </template>
        </child>
        <slot></slot>
      </el-table>
    </div>

</template>

<script>
import child from "@/component/elTableCom/childTable.vue";
import baseScroll from "@/component/BaseScroll.vue";
import { ref } from "vue";
const tableNode = ref(null);
export default {
  name: "elTableCom",
  props: {
    scrollNum: {
      type: [Number],
      default: 3,
    },
    tableTrHeight: {
      type: [Number],
      default: 39,
    },
    wrapScroll: {
      type: [Boolean],
      default: false,
    },
    tableData: {
      type: [Array],
      default: ()=>{
        return [];
      },
    },
    colIndex: {
      type: [Boolean],
      default: false,
    },
    columns: {
      type: [Array],
      default: ()=>{
        return [];
      },
    },
    border: {
      type: [String, Boolean],
      default: false,
    },
    stripe: {
      type: [String, Boolean],
      default: false,
    },
    headAlign: {
      type: [String],
      default: "left",
    },
    subHeadAlign: {
      type: [String],
      default: "left",
    },
  },
  watch: {
    tableData: {
      handler: function (val) {
        this.data = val;
        this.initScroll();
      },
      immediate: true,
      deep: true,
    },
  },
  data () {
    return {
      data: [],
      showt: false,
    };
  },
  components: {child, baseScroll},
  mounted () {
  },
  beforeUnmount () {
  },
  methods: {
    initScroll () {
      if (!this.wrapScroll) {
        return;
      }
      let scrollHeight = this.tableTrHeight * this.data.length;
      this.showt = true;
      this.$nextTick(()=>{
        tableNode.value = document.querySelector(".cus-table").querySelector(".el-scrollbar__wrap");
        tableNode.value.style.height = `${scrollHeight}px`;
        // console.log(tableNode.value.querySelectorAll("tr")[0].offsetHeight, this.tableTrHeight, this.data.length, tableNode.value.style.height);
      });
    },
  },
};
</script>

<style scoped lang="scss">
  .scroll_table {
    flex:1;
    :deep(.table .el-table__body-wrapper) {
      display: none;
    }
    // 重点注意这段样式
    .seamless-warp {
      height: 100%;
      display:flex;
      flex-direction:column;
      :deep( .cus-table) {
        .el-table__header-wrapper {
          display: none;
        }
      }
    }
  }
</style>

子组件见方案一