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之elementUi的el-select同時獲取value和label的三種方式
- vue3?element?plus?table?selection展示數(shù)據(jù),默認選中功能方式
- vue-treeselect(適配Vue3.2)及Element-plus的TreeSelect組件使用
- vue elementui select標簽監(jiān)聽change事件失效問題
- vue2結合element-ui實現(xiàn)TreeSelect樹選擇功能
- Vue中使用 ElementUi 的 el-select 實現(xiàn)全選功能(思路詳解)
- Vue Element如何獲取select選擇框選擇的value和label
相關文章
在Vue3中實現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例
Vue3作為目前最熱門的前端框架之一,以其輕量化、易用性及性能優(yōu)勢吸引了大量開發(fā)者,在開發(fā)過程中,不可避免地需要在組件之間傳遞數(shù)據(jù),本文將詳細講解在Vue3中如何實現(xiàn)子組件向父組件傳遞數(shù)據(jù),并通過具體示例代碼使概念更加清晰2024-07-07Vue監(jiān)控路由與路由參數(shù), 刷新當前頁面數(shù)據(jù)的方法匯總
這篇文章主要介紹了Vue監(jiān)控路由與路由參數(shù), 刷新當前頁面數(shù)據(jù)的幾種方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明
這篇文章主要介紹了Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2021-06-06vue3+vite項目配置ESlint、pritter插件過程
這篇文章主要介紹了vue3+vite項目配置ESlint、pritter插件過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08vue-router中的hash和history兩種模式的區(qū)別
大家都知道vue-router有兩種模式,hash模式和history模式,這里來談談vue-router中的hash和history兩種模式的區(qū)別。感興趣的朋友一起看看吧2018-07-07