快捷導(dǎo)航

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

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

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

背景

封裝組件的時(shí)候遇到一個(gè)場(chǎng)景：

查詢(xún)兩個(gè)接口數(shù)據(jù)得到兩個(gè)分組集合，需要?jiǎng)討B(tài)切換分組選中狀態(tài)，

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

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

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

問(wèn)題分析與解決

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

在頁(yè)面初始化時(shí)，通過(guò)請(qǐng)求接口保存兩個(gè)分組的初始數(shù)據(jù)。

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

這個(gè)方法的缺點(diǎn)是無(wú)法保存用戶(hù)的勾選狀態(tài)。

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

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

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

第三階段：引入reserve-selection

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

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

demo簡(jiǎn)化演示

        <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ī)號(hào)" align="left" prop="phone"/>
        </el-table>

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

}，

reserve-selection完整使用小例

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

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

下面是一個(gè)示例，演示了如何在 `<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`，并且通過(guò) `@selection-change` 事件監(jiān)聽(tīng)器，將選中的行存儲(chǔ)在 `selectedRows` 數(shù)組中。

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

請(qǐng)注意：

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

清除某些選中項(xiàng)

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

demo代碼

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

細(xì)節(jié)優(yōu)化

清除某行數(shù)據(jù)時(shí)，集合的長(zhǎng)度會(huì)實(shí)時(shí)變化，如果按照原有索引去刪除就會(huì)少刪.
所以，正序刪的時(shí)候，每刪除一個(gè)就要索引-1
反序刪直接刪就行

擴(kuò)展方向思考

狀態(tài)同步：如果兩個(gè)分組存在相同的元素，考慮使用一個(gè)映射表（例如使用 JavaScript 對(duì)象）來(lái)同步這些元素的勾選狀態(tài)。
模糊搜索：可以在組件內(nèi)部實(shí)現(xiàn)一個(gè)搜索方法，該方法能夠在用戶(hù)輸入搜索關(guān)鍵字時(shí)過(guò)濾數(shù)據(jù)并更新表格。
性能考慮：如果數(shù)據(jù)集非常大，考慮使用虛擬滾動(dòng)或分頁(yè)來(lái)提高性能。
用戶(hù)體驗(yàn)：提供清晰的用戶(hù)反饋，例如在切換分組或執(zhí)行搜索時(shí)顯示加載指示器。

通過(guò)以上的優(yōu)化，可以確保組件在處理復(fù)雜數(shù)據(jù)和用戶(hù)交互時(shí)保持高性能和良好的用戶(hù)體驗(yàn)。