iview表格 getRowClassName 不默认打开加载

在iview的表格组件中，`getRowClassName` 是一个列级别的自定义CSS类名函数，它可以让你为每一行动态地添加额外的CSS样式，包括但不限于展开行、加载状态等。如果你希望表格的默认加载状态不是预加载所有数据，而是需要用户滚动到某一位置时才开始加载，iview并没有直接提供内置的“按需加载”功能，但它可以通过一些组合使用的方式模拟这种效果。

首先，你需要在`Table`组件上禁用默认的分页或者懒加载(`lazy`或`load-on-demand`)。然后，在`getRowClassName` 函数中，你可以检测当前行的索引是否在已加载数据范围内。如果不在，可以触发异步请求加载下一页数据。

下面是一个简化的例子：

<template>
  <Table :data="loadedData" :loading="isLoading" ref="table" :getRowClassName="getRowClass" :load="loadMore">
    <!-- ... 其他表头和列配置 ... -->
  </Table>
</template>

<script>
export default {
  data() {
    return {
      loadedData: [], // 已加载的数据
      isLoading: false,
      currentPage: 0, // 当前页面数
      pageSize: 10, // 每页展示的条数
    };
  },
  methods: {
    loadMore() {
      this.currentPage++;
      this.fetchData(); // 异步加载更多数据
    },
    fetchData() {
      this.isLoading = true; // 显示加载中状态
      setTimeout(() => {
        // 这里假设你有一个异步获取数据的函数
        const newData = ...; // 联网拉取的新数据
        this.loadedData = [...this.loadedData, ...newData];
        this.isLoading = false; // 加载完成，设置为false
      }, 1500); // 模拟网络延迟
    },
    getRowClass({ row, rowIndex }) {
      if (rowIndex >= this.currentPage * this.pageSize && rowIndex < (this.currentPage + 1) * this.pageSize) {
        return { 'loading-row': true }; // 如果索引在当前页内，则加上 loading-row 类名
      }
      return '';
    },
  },
};
</script>

在这个例子中，`getRowClass`检查行索引，如果在加载范围，就添加 `loading-row` 类名，使得对应行显示加载中的样式。当你滚动到底部时，`loadMore`方法会被调用，进一步触发`fetchData`异步加载新数据。