快捷導(dǎo)航

Vue多選框保留勾選數(shù)據(jù)實現(xiàn)方式

更新時間：2025年08月26日 16:13:07 作者：慕白Lee

文章瀏覽閱讀1.2w次，點贊2次，收藏6次。文章講述了在Vue.js組件開發(fā)中遇到的分組數(shù)據(jù)選中狀態(tài)保存問題，通過三個階段的探索，最終使用ElementUI的reserve-selection屬性解決了數(shù)據(jù)切換與勾選狀態(tài)保留的難題，并提供了相關(guān)代碼示例和優(yōu)化建議。

背景

封裝組件的時候遇到一個場景：

查詢兩個接口數(shù)據(jù)得到兩個分組集合，需要動態(tài)切換分組選中狀態(tài)，

刷新最新的并集，并且可以保留勾選狀態(tài)+模糊搜索，兩個分組會存在相同元素的可能.

第一階段：初始化頁面的時候請求接口并保存初始分組數(shù)據(jù)，一開始是定義了兩個集合用來保存:data的數(shù)據(jù)，集合數(shù)據(jù)動態(tài)切換變化的時候直接獲取最新的，但是缺點是不能保存勾選狀態(tài).
第二階段：發(fā)現(xiàn)只能操作原:data的數(shù)據(jù)，所謂的checked再往回賦值根本沒用. 缺點是數(shù)據(jù)操作和列表數(shù)據(jù)模糊查詢不能實現(xiàn).
第三階段：發(fā)現(xiàn)了reserve-selection這個東東，近乎完美解決問題

總結(jié)：遇到問題先別急著造輪子，大概率有對應(yīng)的功能標(biāo)簽了，一般的業(yè)務(wù)根本觸及不到vue的設(shè)計缺陷的...?

問題分析與解決

第一階段：初始化與數(shù)據(jù)同步

在頁面初始化時，通過請求接口保存兩個分組的初始數(shù)據(jù)。

定義兩個集合來保存數(shù)據(jù)，并在集合數(shù)據(jù)變化時直接獲取最新的數(shù)據(jù)。

這個方法的缺點是無法保存用戶的勾選狀態(tài)。

第二階段：直接操作原始數(shù)據(jù)

后來發(fā)現(xiàn)，必須直接操作原始的 data 數(shù)據(jù)集合。

嘗試將勾選狀態(tài)作為屬性賦值回數(shù)據(jù)集合是無效的，同時也無法實現(xiàn)數(shù)據(jù)操作和列表模糊查詢的需求。

第三階段：引入reserve-selection

最終，使用 reserve-selection 屬性解決了勾選狀態(tài)保留的問題，這表明在遇到問題時應(yīng)該首先考慮框架或庫本身是否提供了解決方案，而不是急于自己編寫解決方案。

保存數(shù)據(jù)勾選狀態(tài)reserve-selection

demo簡化演示

        <el-table ref="table" :row-key="rowKey" :data="tableData" @selection-change="selectionChange"
          max-height="666px">
          <el-table-column type="selection" label="全部" width="55" align="center" :reserve-selection="true" />
          <el-table-column label="姓名" align="left" prop="name" />
          <el-table-column label="手機(jī)號" align="left" prop="phone"/>
        </el-table>

 methods: {   
     rowKey(row) {
        //row-key就是要指定一個key標(biāo)識這一行的數(shù)據(jù)，保證唯一即可
        return row.id;
     }，
    // 列表選擇，val選中的表格行數(shù)據(jù)
    selectionChange(val) {
      console.log(val)
    }，
    //清除表格所有的選中項
     clearSelect(){
        //方法1
        this.$refs["table"].clearSelection();
        //方法2
        this.$refs.buyerTable.clearSelection();
     }，

}，

reserve-selection完整使用小例

在Vue.js中，`reserve-selection` 是一個用于 `<el-table>` 組件（基于 Element UI）的屬性，用于在表格分頁時保留已選中的行。

當(dāng) `reserve-selection` 屬性設(shè)置為 `true` 時，表格在分頁時會保留已選中的行，而不會清除選中狀態(tài)。這樣，在用戶切換分頁時，之前選中的行將保持選中狀態(tài)。

下面是一個示例，演示了如何在 `<el-table>` 組件中使用 `reserve-selection` 屬性：

<template>
  <el-table
    :data="tableData"
    :reserve-selection="true"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John'， age: 25 }，
        { name: 'Jane'， age: 30 }，
        { name: 'Bob'， age: 35 }，
      ]，
      selectedRows: []，
    };
  }，
  methods: {
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    }，
  }，
};
</script>

在上面的示例中，`reserve-selection` 屬性設(shè)置為 `true`，并且通過 `@selection-change` 事件監(jiān)聽器，將選中的行存儲在 `selectedRows` 數(shù)組中。

當(dāng)用戶在表格中選擇行時，`handleSelectionChange` 方法會被調(diào)用，將選中的行存儲在 `selectedRows` 數(shù)組中。即使用戶切換分頁，已選中的行也會保持選中狀態(tài)。

請注意：

reserve-selection屬性僅適用于基于 Element UI 的<el-table>組件。
如果您使用的是其他表格組件或自定義的表格組件，可能沒有類似的屬性或功能。
在這種情況下，您可能需要自行實現(xiàn)保留選中狀態(tài)的邏輯。

清除某些選中項

基于上述理解，還要實現(xiàn)選中項清空的功能

demo代碼

        for (let i = 0; i < this.selections.length; i++) {
          if (true) {
            this.$refs.table.toggleRowSelection(this.selections[i]);
            i--;
          }
        }