elementUi中的table实现跨页多选数据——功能实现

比眉伴天荒 2022-09-09 12:46 430阅读 0赞

最近在开发工业品超市的后台系统，遇到一个需求，就是实现在一个`table`表格中多选数据，由于`table`表格中的数据较多，所以要分页获取，因此现在的需求变为：`如果在跨页的table表格中跨页选择数据`

我一直以为`elementUi`中的`table`是不能实现此功能的，结果百度后发现，竟然是支持的。

效果图：  
表格第一页选中2条数据：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]  
表格第二页选中1条数据  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
这样返回到第一页的时候，第一页选中的两条数据还是勾选的状态的。  
点击表格底部的`完成选择订单`按钮，可以拿到选中的三条数据。

# 跨页多选功能实现 #

#### 给`table`添加`row-key`属性 ####

<el-table
            :data="orderData"
            v-loading="orderloading"
            v-if="orderVisible"
            border
            :row-key="getRowKey"
            style="width: 100%"
            height="300px"
            @selection-change="handleSelectionChange"
            ref="multipleTable"
          >
     ....
     </el-table>

简单分析一下上面的代码：

> data:就是table表格中要展示的数据，格式是一个数组  
> v-loading:加载表格数据时，为了能够更好的人性化，可以添加这个加载属性，然后在表格数据加载的过程中有个数据加载中的效果  
> v-if:因为我这个表格是跟dialog弹层一同存在的，为了保证数据在弹窗打开时能够实时渲染，所以我加了这个判断条件  
> border:给表格添加边框  
> row-key:这个就是实现跨页选择的关键，后面会讲到用法  
> style:给表格添加宽度等css样式  
> height:给表格添加高度，因为如果表格没有数据或者数据较少的时候，为了美观添加高度限制，这样当表格数据过多时，还可以实现固定表头的效果  
> selection-change:勾选数据时，会触发此函数  
> ref:类似于html中的Id，就是可以获取唯一dom的参数

上面中的`row-key`需要绑定一个唯一值，我这边的`table`中的数据，每一条数据中的`id`是唯一值，因此`getRowKey`函数如下：

getRowKey(row) { 
      return row.id;
    },

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 2]

这样就可以实现跨页选择了。  
参考大神链接：  
[大神实现elementUi中的table跨页选择数据的功能：https://www.jianshu.com/p/ea7de7de7b95][elementUi_table_https_www.jianshu.com_p_ea7de7de7b95]

#### `selection-change`:监听选择操作 ####

因为`table`表格选择数据时，会触发这个`selection-change`函数，因此可通过此函数，拿到最终选择的数据。

handleSelectionChange(val) { 
          this.selectOrderArr = val;
        },

上面代码中的`this.selectOrderArr`就是我们最终想要的数据

# 选中数据的回显 #

这个回显，`elementUi`官网中是有提到的。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 4]  
切换选中状态使用的函数就是`toggleRowSelection`,这个函数需要先指定是哪个`table`，此时就可以使用上面指定的`ref`了，然后这个函数还有一个需要注意的一点，就是每次只能设置一条数据，因此需要`forEach`循环，而且这个函数是可以传入两个参数的，第一个参数是每条的数据，第二个参数是是否选中，`true`是选中，`false`是不选中。

![在这里插入图片描述][9283f72ad8214789b3c4b6d725c60550.png]  
所以当进入到表格页面时，如果要实现选中数据的回显，则肯定已经有数据的集合了，也就是个数组，然后遍历数组，跟`table`中的数据比对，此处我使用的`id`，如果`id`一致，则表示需要被选中。

也就是`this.selectOrderArr`里面是有值的。

因此我想当然的认为回填数据应该这样写：

for (var i = 0; i < this.orderData.length; i++) { 
      for (var j = 0; j < this.selectOrderArr.length; j++) { 
        if (this.orderData[i].id == this.selectOrderArr[j].id) { 
          this.$refs.multipleTable.toggleRowSelection(
            this.orderData[i],
            true
          );
        }
      }
    }

但是效果却不是我想要的，当我的`selectOrderArr`中有两条数据时，`table`表格中只有第一条是选中的状态。  
排除是否是闭包导致的问题，我将上面代码中的`var`改为`let`，依然还是有问题。

我也不清楚是哪里出现的问题，因此我想到了其他的方法。

# 利用本地缓存的方法解决`table`数据多选回显的问题 #

我在拿到`selectOrderArr`之后，将数据缓存到本地，  
然后在勾选或者取消勾选触发`handleSelectionChange`函数时，再次进行`localStorage.setItem`缓存存储。

然后切换页码或者页容量时，触发的获取表格数据的函数中，进行如下的操作：

1.  从缓存中拿到选中的数据
2.  对选中数据进行循环，切换为选中状态

如下：

#### 拿到需要回显的数据后进行本地缓存 ####

this.selectOrderArr = this.tableData;
    localStorage.setItem("selectArr", JSON.stringify(this.selectOrderArr));

此时本地缓存中的效果如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
缓存中有两条数据。  
然后需要将此两条数据对应的行进行选中，需要下面的代码：

this.selectOrderArr = JSON.parse(localStorage.getItem("selectArr")) || [];
    this.selectOrderArr &&
      this.selectOrderArr.forEach((row) => { 
        this.$refs.multipleTable.toggleRowSelection(row, true);
    });

先从缓存中获取，然后进行设置为`true`为选中状态。  
我是把上面的代码放在获取表格数据的函数中，因为无论是换页还是切换页容量，都会走这个获取表格数据的函数，由于选中的数据是跨页的，因此每次获取表格数据，都需要进行比对。

在选择或者取消选择数据时，也需要保存一下缓存。

handleSelectionChange(val) { 
      this.selectOrderArr = val;
      localStorage.setItem("selectArr", JSON.stringify(this.selectOrderArr));
    },

经过上面的几步就完成基本功能了。

我这边还有一个需求就是，除了回显之外的，将这次新添加的数据，单独调用接口，因此我现在的需求变为了，取现在勾选状态与之前选中数据的差集。

# 取两个对象数组的差集 #

下面的代码是我网上找的，新选中的数据中有个`id`，之前选中的数据中有个`orderId`,这两个值相等就代表是之前选中的数据，否则才是差集。

完成！！！

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f1225ac447934c8092a34b377509c92f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/f8de0b9024934af7b450e6c38b1404c2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/308c124540ae455ebf6bfd56ee38d785.png
[elementUi_table_https_www.jianshu.com_p_ea7de7de7b95]: https://www.jianshu.com/p/ea7de7de7b95
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220829/0d71fa371d7b4691adbf73ec9642a170.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220829/a8c195f01d794d27b88ec206381ed394.png
[9283f72ad8214789b3c4b6d725c60550.png]: /images/20220829/800f2e2a9e4f4883bd07c7d3f61a675d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAeWVoYW9jaGVuZzUyMA_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220829/aa879afa07604a51b17e1ed61b8625cb.png