Element UI 实战：跨页保存表格选中状态与判断状态可选性的高效方案

原创

已于 2023-12-05 10:22:03 修改 · 2.6k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #elementui #vue.js #javascript #前端框架 #交互

于 2023-11-30 14:58:55 首次发布

本文介绍如何在ElementUI中实现跨页时保存选中项和禁选特定执行项的需求，包括表格组件的使用、状态管理和可选性判断，以提供良好的用户体验。

引言

在前文中，我们曾深入探讨了在修改数据后跨页时提醒用户可能丢失数据的问题。虽然这种方式对于一些场景是足够的，但当涉及选择框时，我们需要更为智能和高效的解决方案。在本文中，我们将分享一种基于 Element UI 的实际案例，旨在实现跨页保存选中项与禁选特定项的需求。通过以下详细讨论，你将了解到这一方案的实现原理及其用户体验效果。

问题背景

在许多 Web 应用中，数据分页是常见的操作方式。当用户在一个页面中选择了一些数据项，然后切换到另一页时，保持之前选中的项通常是用户友好的体验。同时，可能存在一些需要禁选的执行项，例如在某些状态下，用户不应该选择或执行某些操作：如当数据可以进行执行相关操作，并且需要消耗一定时间时，我们为了任务的完整执行，会在任务执行期间，禁止选中该任务的选择框（可以预防用户进行删除等操作），后续执行完毕可以恢复初始选中状态，也可以放弃选中状态。

方案设计与实现

在 Element UI 中，表格（Table）组件提供了丰富的特性和事件。可以利用这些特性和事件来实现跨页保存选中项和禁选执行项的需求。

实现

1.跨页保存

在许多 Web 应用中，数据分页是常见的操作方式。当用户在一个页面中选择了一些数据项，然后切换到另一页时，保持之前选中的项通常是用户友好的体验。

模板

    <el-table
      ref="multipleTable"
      :data="tableData"
      @select="handleSelectionChange"
      @select-all="handleSelectionAll"
    >
      <el-table-column type="selection" align="center"></el-table-column>
      <el-table-column prop="name" label="name" align="center"></el-table-column>
      <el-table-column prop="age" label="age" align="center"></el-table-column>
    </el-table>
    
    <el-pagination
      :background="true"
      :current-page.sync="queryParams.page"
      :page-size.sync="queryParams.pageSize"
      layout="total,prev,pager,next,sizes"
      :total="total"
      :page-sizes="[5, 10, 20, 40]"
      @size-change="getList"
      @current-change="getList" />

脚本

data() {
    return {
      total: void 0,
      queryParams: {
        page: 1,
        pageSize: 10,
      },
      allData: [],
      tableData: [],
      multipleSelection: [],
      listId: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.allData = [
        { name: 'A', age: 1 },
        { name: 'B', age: 2 },
        { name: 'C', age: 3 },
        { name: 'D', age: 4 },
        { name: 'E', age: 5 },
        { name: 'F', age: 6 },
        { name: 'G', age: 7 },
        { name: 'H', age: 8 },
        { name: 'I', age: 9 },
        { name: 'J', age: 10 },
        { name: 'K', age: 11 },
        { name: 'L', age: 12 },
        { name