elementui全选卡顿(elementui表格全选框禁用)

在使用ElementUI的表格组件时，如果数据量较大，全选操作可能会导致页面卡顿。本文将介绍几种解决全选卡顿问题的方法，并提供具体的代码示例。

1. 优化数据处理

1.1 减少数据量

减少表格中显示的数据量是解决卡顿问题的最直接方法。可以通过分页或虚拟滚动来实现。

html

  
    
    
    
  
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"</p>

<blockquote>
  <p>
  </p>
</blockquote>


export default {
  data() {
    return {
      tableData: [],
      allData: [], // 假设这是从后端获取的所有数据
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.tableData = this.allData.slice((val - 1) * this.pageSize, val * this.pageSize);
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    }
  },
  created() {
    // 模拟从后端获取数据
    this.allData = Array.from({ length: 1000 }, (_, index) => ({
      id: index + 1,
      name: `Name ${index + 1}`,
      age: Math.floor(Math.random() * 100)
    }));
    this.total = this.allData.length;
    this.handleCurrentChange(1);
  }
};


<p>

1.2 使用虚拟滚动

虚拟滚动可以显著提升大数据量下的性能。可以使用第三方库如vue-virtual-scroll-list。

html

  <div>
    
      
      
      
    
    <vue-virtual-scroll-list
      :size="itemHeight"
      :remain="remain"
      :keeps="keeps"
      :data-key="'id'"
      :data-sources="allData"
      :estimate-size="estimateSize"
      @scroll="handleScroll"
    >
      
        <div class="virtual-item">
          {{ item.name }} - {{ item.age }}
        </div>
      
    
  </div>
</p>


import VueVirtualScrollList from 'vue-virtual-scroll-list';

export default {
  components: {
    VueVirtualScrollList
  },
  data() {
    return {
      allData: [],
      visibleData: [],
      itemHeight: 40,
      remain: 10,
      keeps: 20,
      selectedRows: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    handleScroll(event) {
      const scrollTop = event.target.scrollTop;
      const start = Math.floor(scrollTop / this.itemHeight);
      const end = start + this.remain;
      this.visibleData = this.allData.slice(start, end);
    },
    estimateSize() {
      return this.itemHeight;
    }
  },
  created() {
    this.allData = Array.from({ length: 1000 }, (_, index) => ({
      id: index + 1,
      name: `Name ${index + 1}`,
      age: Math.floor(Math.random() * 100)
    }));
    this.handleScroll({ target: { scrollTop: 0 } });
  }
};



.virtual-item {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}


<p>

2. 优化全选逻辑

2.1 延迟执行全选操作

通过延迟执行全选操作，可以避免立即对大量数据进行处理，从而减少卡顿。

html

  
    
    
    
  
  全选
</p>


export default {
  data() {
    return {
      tableData: [],
      selectedRows: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    selectAll() {
      this.$nextTick(() => {
        this.$refs.table.toggleAllSelection();
      });
    }
  },
  created() {
    this.tableData = Array.from({ length: 1000 }, (_, index) => ({
      id: index + 1,
      name: `Name ${index + 1}`,
      age: Math.floor(Math.random() * 100)
    }));
  }
};


<p>

2.2 使用批量处理

将全选操作拆分成多个小任务，逐步处理，避免一次性处理大量数据。

html

  
    
    
    
  
  全选
</p>


export default {
  data() {
    return {
      tableData: [],
      selectedRows: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    selectAll() {
      const batchSize = 100;
      let start = 0;
      const total = this.tableData.length;

      const selectBatch = () => {
        if (start < total) {
          const end = Math.min(start + batchSize, total);
          for (let i = start; i  ({
      id: index + 1,
      name: `Name ${index + 1}`,
      age: Math.floor(Math.random() * 100)
    }));
  }
};


<p>

通过以上几种方法，可以有效解决ElementUI表格全选卡顿的问题。根据具体需求和场景选择合适的方法，可以显著提升用户体验。