亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue?elementui如何實現(xiàn)表格selection的默認勾選

 更新時間:2024年06月07日 16:30:37   作者:周達  
這篇文章主要介紹了Vue?elementui如何實現(xiàn)表格selection的默認勾選問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

需求

彈出一個選擇框,表格有勾選框,數(shù)據(jù)填充后,某些行設置默認勾選。

如下圖

數(shù)據(jù)填充后默認是不勾選的,如果要勾選某些行,通過toggleRowSelection

this.$refs.zttable.toggleRowSelection(this.ZHUANTIList[i]);

vue中dom和數(shù)據(jù)是綁定的,通過修改數(shù)據(jù)就能夠實現(xiàn)對視圖的修改,但是視圖(dom)的更新是異步的,并不是修改了數(shù)據(jù),視圖會接著刷新。

此時就用到了$nextTick,延遲回調,會將回調延遲到下次 DOM 更新循環(huán)之后執(zhí)行。

簡單來說,$nextTick會在dom更新完成后再執(zhí)行。

    <el-dialog :title="title" :visible.sync="openZtScope" width="600px" append-to-body>
      <el-table ref="zttable" :data="ZHUANTIList" @selection-change="handleZTSelectionChange" style="width:100%;">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="編號" align="center" prop="objectid" />
        <el-table-column label="名稱" align="center" prop="name" />
      </el-table>
      <pagination
        v-show="zttotal>0"
        :total="zttotal"
        :page.sync="queryParamsZT.pageNum"
        :limit.sync="queryParamsZT.pageSize"
        @pagination="getZTList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitZtScope">確 定</el-button>
        <el-button @click="cancelZtScope">取 消</el-button>
      </div>
    </el-dialog>

設置勾選的操作,必須放到nextTick中,等數(shù)據(jù)填充完成,視圖(dom)相應更新完成后。

this.$nextTick可以放到具體的方法中

例如,本例中放到數(shù)據(jù)填充方法后面,注意調用this.$nextTick之前視圖要先顯示,否則默認勾選將不起作用。

        this.$nextTick(() => {
 
          for (let i = 0; i < this.ZHUANTIList.length; i++) {
            for (let j = 0; j <this.RoleZTList.length ; j++) {
               //兩個數(shù)組做比對,選中的做勾選
              if(this.ZHUANTIList[i].objectid==this.RoleZTList[j].zhuantiid)
              {
                this.$refs.zttable.toggleRowSelection(this.ZHUANTIList[i]);
              }
            }
          }
 
        });
getZTList() {
      listZHUANTI(this.queryParamsZT).then(response => {
        this.ZHUANTIList = response.rows;
        this.zttotal = response.total;
        //獲取當前role的選中的專題
        this.getRoleZTList(this.curRoleId);
      });
 
    },
    getRoleZTList(roleId){
      listRoleZhuanTi({roleid:roleId}).then(response =>{
         debugger;
         this.RoleZTList = response.rows;
 
        //先顯示再改dom,這個必須放在nexttick外面
        this.openZtScope = true;
        this.title = "xxx";
 
        //數(shù)據(jù)更新之后延遲回調,根據(jù)最新數(shù)據(jù)動態(tài)改變dom,必須放到nextTick中
        this.$nextTick(() => {
 
          for (let i = 0; i < this.ZHUANTIList.length; i++) {
            for (let j = 0; j <this.RoleZTList.length ; j++) {
               //兩個數(shù)組做比對,選中的做勾選
              if(this.ZHUANTIList[i].objectid==this.RoleZTList[j].zhuantiid)
              {
                this.$refs.zttable.toggleRowSelection(this.ZHUANTIList[i]);
              }
            }
          }
 
        });
 
      });
    },

總結

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • 基于Vue實現(xiàn)頁面切換左右滑動效果

    基于Vue實現(xiàn)頁面切換左右滑動效果

    這篇文章主要為大家詳細介紹了基于Vue實現(xiàn)頁面切換左右滑動效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • 在Vue3中實現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例

    在Vue3中實現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例

    Vue3作為目前最熱門的前端框架之一,以其輕量化、易用性及性能優(yōu)勢吸引了大量開發(fā)者,在開發(fā)過程中,不可避免地需要在組件之間傳遞數(shù)據(jù),本文將詳細講解在Vue3中如何實現(xiàn)子組件向父組件傳遞數(shù)據(jù),并通過具體示例代碼使概念更加清晰
    2024-07-07
  • Vue監(jiān)控路由與路由參數(shù), 刷新當前頁面數(shù)據(jù)的方法匯總

    Vue監(jiān)控路由與路由參數(shù), 刷新當前頁面數(shù)據(jù)的方法匯總

    這篇文章主要介紹了Vue監(jiān)控路由與路由參數(shù), 刷新當前頁面數(shù)據(jù)的幾種方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-10-10
  • vue?vue-esign簽字板的demo

    vue?vue-esign簽字板的demo

    這篇文章主要介紹了vue?vue-esign簽字板的實例講解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明

    Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明

    這篇文章主要介紹了Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-06-06
  • vue3+vite項目配置ESlint、pritter插件過程

    vue3+vite項目配置ESlint、pritter插件過程

    這篇文章主要介紹了vue3+vite項目配置ESlint、pritter插件過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • Vue的MVVM實現(xiàn)方法

    Vue的MVVM實現(xiàn)方法

    本篇文章主要主要介紹了Vue的MVVM實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • vue-router中的hash和history兩種模式的區(qū)別

    vue-router中的hash和history兩種模式的區(qū)別

    大家都知道vue-router有兩種模式,hash模式和history模式,這里來談談vue-router中的hash和history兩種模式的區(qū)別。感興趣的朋友一起看看吧
    2018-07-07
  • Vue3?Hooks?模塊化抽離示例詳解

    Vue3?Hooks?模塊化抽離示例詳解

    這篇文章主要為大家介紹了Vue3?Hooks?模塊化抽離示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • vue?路由切換過渡動效滑入滑出效果的實例代碼

    vue?路由切換過渡動效滑入滑出效果的實例代碼

    在支付寶賬單頁面有這樣一個特效切換過渡動效滑入滑出效果,非常方便實用,那么這個功能如何實現(xiàn)的呢?下面小編通過vue實現(xiàn)路由切換過渡動效滑入滑出效果,感興趣的朋友一起看看吧
    2022-03-03

最新評論