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

更新時間：2024年06月07日 16:30:37 作者：周達

這篇文章主要介紹了Vue?elementui如何實現(xiàn)表格selection的默認勾選問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

需求

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

如下圖

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

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

vue中dom和數(shù)據(jù)是綁定的，通過修改數(shù)據(jù)就能夠?qū)崿F(xiàn)對視圖的修改，但是視圖（dom）的更新是異步的，并不是修改了數(shù)據(jù)，視圖會接著刷新。

此時就用到了$nextTick,延遲回調(diào)，會將回調(diào)延遲到下次 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>

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

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

例如，本例中放到數(shù)據(jù)填充方法后面，注意調(diào)用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;
        //獲取當(dāng)前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ù)更新之后延遲回調(diào)，根據(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]);
              }
            }
          }
 
        });
 
      });
    },