快捷導(dǎo)航

vue中table實(shí)現(xiàn)真正的跨越全選

更新時(shí)間：2023年05月09日 11:12:20 作者：Winter_Bear

本文主要介紹了vue中table實(shí)現(xiàn)真正的跨越全選，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、項(xiàng)目需求

1.最初產(chǎn)生

運(yùn)營(yíng)測(cè)試時(shí)，提出跨頁(yè)全選的要求；感官上在頁(yè)面中只要勾選上方的復(fù)選框，那么就要勾選所有的數(shù)據(jù)。需求大致描述如下：

2.實(shí)現(xiàn)思路：

2.1 翻找element-ui框架文檔及網(wǎng)上的實(shí)現(xiàn)方式：全選勾選的本頁(yè)的數(shù)據(jù)，只有翻頁(yè)時(shí)才會(huì)勾選下一頁(yè)的數(shù)據(jù)；當(dāng)翻到非首頁(yè)，勾選全選按鈕，得到的效果也不會(huì)選中前面頁(yè)面的數(shù)據(jù)等等。
2.2 框架本身的限制，全選并不會(huì)拿到所有的數(shù)據(jù)，另外考慮到數(shù)據(jù)過多的情況，前端傳遞所有選中id不太現(xiàn)實(shí)；那么就實(shí)現(xiàn)感官上的全選，只要點(diǎn)擊全選，頁(yè)面效果是【全勾選所有】數(shù)據(jù)。

二、代碼實(shí)現(xiàn)

第一步：去除項(xiàng)目本身的全選按鈕，添加屬于自己的【全選】按鈕

<template>
    <div class="change-table">
        <el-checkbox 
        :class="allChangeFlag ? 'change-nocheckbox' : 'change-checkbox'"  
        v-model="checkChangeAll"
        @change="handleCheckAllChange"
        :disabled="!tableData.length"
        ></el-checkbox>
        <el-table
          border
          ref="tableData"
          :data="tableData"
          style="width: 100%"
          max-height="750"
          :row-key="getRowKeys"
          @select="changeSelect"
          @select-all="changeSelectAll"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            type="index"
            :index="
              (index) => indexrank(index, this.pageNum, this.pageCount)
            "
            label="序號(hào)"
            width="55"
          ></el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="140"
            align="left"
          >
            <template v-slot="scope">
              <el-button
                type="text"
                class="operat-btn"
                @click="getDetail(scope.row)"
              >
                查看詳情
              </el-button>
              <el-button
                v-if="scope.row.back_flag"
                type="text"
                class="operat-btn"
                @click="openDialog('recall', scope.row, scope.$index)"
              >
                撤回
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <page
            :total="totalNum"
            :page="pageNum"
            :size="pageCount"
            :Slzes="[5, 10, 20, 50]"
            @handlePageSizeChange="handleChange"
          ></page>
        </div>
      </div>
</template>

第二步：隱藏el-table的全選按鈕，定位自定義el-checkbox

// 樣式代碼
<style>
 .change-table {
   position: relative;
 }
.change-checkbox {
  position: absolute;
  left: 21px;
  top: 20px;
  z-index: 10;
}
.change-checkbox >>> .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #fff;
  border-color: #dcdfe6;
}
.change-nocheckbox {
  position: absolute;
  left: 21px;
  top: 21px;
  z-index: 10;
}
.change-nocheckbox >>> .el-checkbox__inner::after {
  border: none;
}
::v-deep .el-table .disabledCheck .cell .el-checkbox__inner {
  display: none;
}
</style>

第三步：監(jiān)聽數(shù)據(jù)，配合UI庫(kù)規(guī)定方法或?qū)傩?，?shí)現(xiàn)感官全選

<script>
export default {
 data() {
    return {
     tableData:[],
     allChangeFlag: false, // 是否勾選自定義全選按鈕
     checkChangeAll: false, // 自定義全選標(biāo)識(shí)
     unmultipleSelection: [], // 未選中數(shù)據(jù)數(shù)組
     enterUnCheckedPk: [], // 選中數(shù)據(jù)pk數(shù)組
     isTableAll: false, // table組件有無(wú)點(diǎn)擊全選按鈕標(biāo)識(shí)
     checkVal: [], // 選中數(shù)據(jù)數(shù)組
     enterCheckedPk: [], // 選中數(shù)據(jù)pk數(shù)組
    }
 },
 watch:{
 // 監(jiān)聽渲染列表數(shù)組的變化，一旦變化 執(zhí)行相關(guān)函數(shù)，使全選狀態(tài)下，每一頁(yè)按照全選顯示
    tableData: {
      handler(value) {
        if (this.isTableAll) {
          let that = this;
          let len = that.checkVal.length;
          let lenOff = that.unmultipleSelection.length;
          value.forEach((row) => {
            // 遍歷新請(qǐng)求回來的當(dāng)頁(yè)數(shù)據(jù)，和已經(jīng)選擇的數(shù)組中所有對(duì)象對(duì)比，如果有相同的，說明已經(jīng)選擇了，不再選擇，其他沒有選擇的設(shè)置為選中狀態(tài)
            for (let i = 0; i < len; i++) {
              if (row.pk_info_manage === that.checkVal[i].pk_info_manage) {
                that.$refs.tableData.toggleRowSelection(row, false);
                break;
              } else {
                that.$refs.tableData.toggleRowSelection(row, true);
              }
            }
            // 循環(huán)遍歷新的請(qǐng)求回來的當(dāng)頁(yè)數(shù)據(jù)，和手動(dòng)未選擇的數(shù)組對(duì)比，如果有相同的，將其樣式顯示為未選擇狀態(tài)
            for (let i = 0; i < lenOff; i++) {
              if (
                row.pk_info_manage ===
                that.unmultipleSelection[i].pk_info_manage
              ) {
                that.$refs.tableData.toggleRowSelection(row, false);
              }
            }
          });
        }
      },
      deep: true,
    },
    // 跨頁(yè)選擇
    checkVal: {
      handler(newValue, old) {
        this.$nextTick(() => {
          if (newValue.length > 0) {
            if (this.totalNum != newValue.length) {
              this.$refs.tableData.store.states.isAllSelected = false;
            } else {
              this.checkChangeAll = true;
              this.$refs.tableData.store.states.isAllSelected = true;
            }
          } else {
            this.$refs.tableData.clearSelection();
          }
        });
      },
    },
    // 監(jiān)聽未選中的數(shù)據(jù)變化，如果存在則全選數(shù)據(jù)不為全選
    unmultipleSelection: {
      handler(newValue, old) {
        this.enterUnCheckedPk = [];
        this.$nextTick(() => {
          this.unmultipleSelection.forEach((item) => {
            if (this.enterUnCheckedPk.indexOf(item.pk_info_manage) == -1) {
              this.enterUnCheckedPk.push(item.pk_info_manage);
            }
          }); // 獲取未選中的pk
        });
      },
    },
 },
 methods:{
    // 跨頁(yè)選擇 給table每個(gè)添加不同的key
    getRowKeys(row) {
      return row.pk_info_manage;
    },
    // 勾選自定義復(fù)選框方法
    handleCheckAllChange() {
      this.allChangeFlag = !this.allChangeFlag;
      this.unmultipleSelection = []; // 取消選中數(shù)據(jù)
      this.enterUnCheckedPk = []; // 取消選中數(shù)據(jù)pk
      this.checkVal = []; // 選中數(shù)據(jù)
      this.enterCheckedPk = []; // 選中數(shù)據(jù)pk
      this.changeSelectAll();
    },
    changeSelect(selection, row) {
      if (this.isTableAll) {
        let selected = selection.length && selection.indexOf(row) !== -1; // 為true時(shí)選中，為 0 時(shí)（false）未選中
        // 當(dāng)手動(dòng)操作為未選中狀態(tài)時(shí)
        if (!selected) {
          // 將未選中的數(shù)據(jù)放在一個(gè)變量里
          this.unmultipleSelection.push(row);
          // 當(dāng)再次手動(dòng)操作為選中狀態(tài)的時(shí)候
        } else {
          // 為了使再次選中后，將未選擇數(shù)組中的該數(shù)據(jù)刪除掉，遍歷未選擇的數(shù)組 和當(dāng)前操作打√的數(shù)據(jù)比較，如果不同的就過濾留下，相同的就去除。
          this.unmultipleSelection = this.unmultipleSelection.filter(
            // 如果item.score不等于row.score就留下
            (item) => item.pk_info_manage !== row.pk_info_manage,
          );
        }
      } else {
        this.unmultipleSelection = [];
      }
    },
    // el-table全選方法
    changeSelectAll(val) {
      if (!this.isTableAll) {
        // 1.1.1遍歷當(dāng)前展示的數(shù)組，使所有的多選框?yàn)?√ 選擇狀態(tài)
        this.tableData.forEach((row) => {
          this.$refs.tableData.toggleRowSelection(row, true);
        });
        this.isTableAll = true;
        // 1.2當(dāng)選擇所有 選項(xiàng)框狀態(tài)為 空 時(shí)
      } else {
        this.isTableAll = false;
        // 1.2.1遍歷當(dāng)前展示的數(shù)組，使所有的多選框?yàn)?未 選擇狀態(tài)
        this.$refs.tableData.clearSelection();
      }
    },
     // 復(fù)選框選擇
    handleSelectionChange(val) {
      this.checkVal = val;
      this.enterCheckedPk = [];
      this.checkVal.forEach((item) => {
        if (this.enterCheckedPk.indexOf(item.pk_info_manage) == -1) {
          this.enterCheckedPk.push(item.pk_info_manage);
        }
      });
    },
 }
}
</script>

三、代碼實(shí)現(xiàn)全選按鈕的半選狀態(tài)

半選實(shí)現(xiàn)的思路：

未點(diǎn)擊過全選：每次勾選數(shù)據(jù)即為半選；
勾選全選：監(jiān)聽未勾選的數(shù)據(jù)，只要存在未勾選數(shù)據(jù)，即為半選。

// 此處代碼為單純半選狀態(tài)的處理
<el-checkbox 
    :class="allChangeFlag ? 'change-nocheckbox' : 'change-checkbox'"  
    v-model="checkChangeAll"
    @change="handleCheckAllChange"
    :disabled="!tableData.length"
    :indeterminate="isIndeterminate"
></el-checkbox>
data(){
 return {
   isIndeterminate: false, // 半選狀態(tài)標(biāo)識(shí)
 }
},
watch: {
    // 跨頁(yè)選擇
    checkVal: {
      handler(newValue, old) {
        this.$nextTick(() => {
          if (newValue.length > 0) {
            if (this.totalNum != newValue.length) {
              if(!this.checkChangeAll) {
                this.isEnterpriseIndeterminate = true; // 在未勾選全選，手動(dòng)操作時(shí)，再控制半選狀態(tài)
              }
              this.$refs.tableData.store.states.isAllSelected = false;
            } else {
              this.checkChangeAll = true;
              this.$refs.tableData.store.states.isAllSelected = true;
            }
          } else {
            this.$refs.tableData.clearSelection();
          }
        });
      },
    },
    // 監(jiān)聽未選中的數(shù)據(jù)變化，如果存在則全選數(shù)據(jù)不為全選
    unmultipleSelection: {
      handler(newValue, old) {
        this.$nextTick(() => {
          this.isIndeterminate = newValue.length > 0; // 控制半選狀態(tài)
        });
      },
    },
}

四、總結(jié)

實(shí)現(xiàn)跨頁(yè)全選，本質(zhì)上仍然是前后端配合的，全選標(biāo)識(shí)flag、勾選或未勾選pks、查詢的參數(shù)searchParams

如果是全選的話，需要前后端配合，設(shè)置全選標(biāo)識(shí)flag:true，傳遞全選情況下的查詢條件:searchParams；
全選但取消勾選個(gè)別幾項(xiàng)，設(shè)置全選標(biāo)識(shí)flag: true，傳遞查詢條件searchParams、取消勾選的pk值:pks；
若是正常勾選數(shù)據(jù)，進(jìn)行數(shù)據(jù)操作，設(shè)置全選標(biāo)識(shí)flag:false，選中勾選的pk值：pks。

到此這篇關(guān)于vue中table實(shí)現(xiàn)真正的跨越全選的文章就介紹到這了,更多相關(guān)vue table跨越全選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: