el-table渲染10000条数据卡死解决代码

el-table渲染10000条数据会导致性能问题，可以通过以下几种方式解决：

1. 分页加载数据：将数据分页加载，每次只加载当前页的数据，可以减轻页面渲染压力，提高性能。

2. 虚拟滚动：使用`el-table`组件的虚拟滚动功能，只渲染当前可见区域的数据，可以减少页面渲染数量，提高性能。

3. 后端分页：将数据的分页处理交给后端处理，每次只返回当前页的数据，减少数据传输量，提高性能。

以下是使用虚拟滚动的示例代码：

<el-table :data="tableData" :height="500" :row-height="50" :header-row-height="50" v-loading="loading" :row-class-name="rowClassName">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

export default {
  data() {
    return {
      loading: false,
      tableData: [],
      currentPage: 1,
      pageSize: 100,
      total: 0
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    async getTableData() {
      this.loading = true;
      const res = await fetch(`api/data?page=${this.currentPage}&pageSize=${this.pageSize}`);
      const data = await res.json();
      this.tableData = data.list;
      this.total = data.total;
      this.loading = false;
    },
    rowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'odd-row';
      }
      return '';
    },
    handleScroll() {
      const visibleCount = Math.ceil(this.$el.offsetHeight / 50);
      const start = Math.floor(this.$refs.table.$el.scrollTop / 50);
      const end = start + visibleCount - 1;
      this.$refs.table.visibleData = this.tableData.slice(start, end + 1);
    }
  },
  watch: {
    async currentPage() {
      await this.getTableData();
    }
  },
  mounted() {
    this.$refs.table.$el.addEventListener('scroll', this.handleScroll);
    this.handleScroll();
  },
  beforeDestroy() {
    this.$refs.table.$el.removeEventListener('scroll', this.handleScroll);
  }
}