JavaScript定義簡單的頁面復選框實現(xiàn)全選操作

更新時間：2023年05月04日 14:58:03 作者：摸魚攻城獅qc

本文主要介紹了JavaScript定義簡單的頁面復選框實現(xiàn)全選操作，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1. 效果演示

2. 彈窗代碼

<el-dialog title="分配角色" :visible.sync="dialogRoleVisible">
  <el-form label-width="80px">
    <el-form-item label="用戶名">
      <el-input disabled :value="sysUser.username"></el-input>
    </el-form-item>
    <el-form-item label="角色列表">
      <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="originalRoleList" @change="handleCheckedChange">
        <el-checkbox v-for="role in allRoles" :key="role.id" :label="role.id">{{role.roleName}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
  <div slot="footer">
    <el-button type="primary" @click="assignRole" size="small">保存</el-button>
    <el-button @click="dialogRoleVisible = false" size="small">取消</el-button>
  </div>
</el-dialog>

這里的每個復選框綁定每個角色的 id 值

3. 變量闡述

originalRoleList 存放從后端獲取到的當前員工對應的角色id數(shù)組
allRoles 存放獲取到的所有角色列表，用于頁面渲染
checkAll bool值，true代表當前選中全選，false代表沒有
allRolesId 根據(jù)所有角色獲取到的所有角色 id

4. 實現(xiàn)邏輯

為了提升用戶體驗，allRoles、allRolesId兩個變量都是在頁面渲染之前獲得，即通過 created 函數(shù)實現(xiàn)

created() {
    this.fetchData() //刷新數(shù)據(jù)
    this.getAllRoles() 
},

通過調用后端提供的getRoles()方法來獲取到數(shù)據(jù)庫中所有的角色集合，然后通過遍歷該集合獲取到所有角色的id數(shù)組

getAllRoles(){
  api_r.getRoles().then(response => {
    this.allRoles = response.data;
    //獲取所有的id集合
    for(let i=0;i<this.allRoles.length;i++){
      this.allRolesId[i] = this.allRoles[i].id
    }
  })
},

接下來就是本篇文章的重頭戲，全選功能實現(xiàn)
由于originalRoleList是通過 v-model 雙向綁定，所以我們只需在點擊全選按鈕時更換當前originalRoleList中的值就好了

handleCheckAllChange(){
    //在每一次點擊時通過三目運算符判斷
  this.checkAll === false ? true : false
  if(this.checkAll)
    this.originalRoleList = this.allRolesId
  else
    this.originalRoleList = []  
},

解決完上述問題后，在調試中發(fā)現(xiàn) 在全選按鈕選中的情況下，取消其他子選項并沒有取消全選，所以此時我們應該在子按鈕的 @change 事件中做相應的邏輯完善，即簡單判斷當前角色的idList是否于全選狀態(tài)下的idList長度相等即可

handleCheckAllChange(){
    //在每一次點擊時通過三目運算符判斷
  this.checkAll === false ? true : false
  if(this.checkAll)
    this.originalRoleList = this.allRolesId
  else
    this.originalRoleList = []  
},

以上就是簡單的頁面復選框中實現(xiàn)全選操作。而對于點擊保存按鈕以后與后端交互的邏輯這里就不細述，其實也就是把當前的originalRoleList傳回去，后端通過比較新的idList和舊的idList，多的增，少的刪??

到此這篇關于JavaScript定義簡單的頁面復選框實現(xiàn)全選操作的文章就介紹到這了,更多相關JavaScript全選操作內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: