<el-table border :data="infoDataList" max-height="300" :row-class-name="tableRowClassName">只加载可视部分

好的，你的问题是如何只加载可视部分的`<el-table>`表格。在Vue.js中，你可以使用`vue-virtual-scroller`插件来实现这个功能。它可以帮助你只渲染可见的部分，而不是整个列表，这可以大大提高性能。以下是实现方法：

1.首先安装`vue-virtual-scroller`插件：

npm install vue-virtual-scroller --save

2.在你的Vue.js项目中引入`vue-virtual-scroller`：

import { RecycleScroller } from 'vue-virtual-scroller';

3.使用`RecycleScroller`组件来包装`<el-table>`组件，添加`v-bind:itemSize`和`v-bind:items`属性：

<template>
  <recycle-scroller
    :items="infoDataList"
    :item-size="40"
    v-bind="scrollerProps"
  >
    <el-table border max-height="300" :row-class-name="tableRowClassName">
      <!-- 表格列 -->
    </el-table>
  </recycle-scroller>
</template>

在上面的代码中，`v-bind:itemSize`指定了每个列表项的高度（单位为像素），`v-bind:items`指定了要渲染的数据列表，`<el-table>`组件包含了你的表格列。

通过这种方式，`<el-table>`表格将只渲染可见的部分，同时保持高性能。希望这个方法对你有所帮助！