Vue elementui 实现表格selection的默认勾选

需求：弹出一个选择框，表格有勾选框，数据填充后，某些行设置默认勾选。

如下图：

数据填充后默认是不勾选的，如果要勾选某些行，通过toggleRowSelection

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

vue中dom和数据是绑定的，通过修改数据就能够实现对视图的修改，但是视图（dom）的更新是异步的，并不是修改了数据，视图会接着刷新。此时就用到了$nextTick,延迟回调，会将回调延迟到下次 DOM 更新循环之后执行。简单来说，$nextTick会在dom更新完成后再执行。

    <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><paginationv-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中，等数据填充完成，视图（dom）相应更新完成后。

this.$nextTick可以放到具体的方法中，例如，本例中放到数据填充方法后面，注意调用this.$nextTick之前视图要先显示，否则默认勾选将不起作用。

        this.$nextTick(() => {for (let i = 0; i < this.ZHUANTIList.length; i++) {for (let j = 0; j <this.RoleZTList.length ; j++) {//两个数组做比对,选中的做勾选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";//数据更新之后延迟回调，根据最新数据动态改变dom,必须放到nextTick中this.$nextTick(() => {for (let i = 0; i < this.ZHUANTIList.length; i++) {for (let j = 0; j <this.RoleZTList.length ; j++) {//两个数组做比对,选中的做勾选if(this.ZHUANTIList[i].objectid==this.RoleZTList[j].zhuantiid){this.$refs.zttable.toggleRowSelection(this.ZHUANTIList[i]);}}}});});},

Vue elementui 实现表格selection的默认勾选相关推荐

elementUI中的el-table勾选框设置默认勾选、禁用
elementUI中的el-table勾选框设置默认勾选.禁用最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态, 如果remark= ...
web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用
1.el-table如果我们想新增一个勾选框,在 .vue文件中 <el-table-column type="selection" width="55" ...
element表格默认勾选
使用表格的时候,偶尔会需要回勾上一次勾选的数据(默认勾选): 主要是用到了默认提供的方法:toggleRowSelection(row,boolean) this.allData.forEach(it ...
Vue+ElementUI table表格分页
Vue+ElementUI table表格分页分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但 ...
Vue+element-ui实现表格数据渲染+分页
Vue+element-ui实现表格数据渲染+分页具体属性请看官方文档:Table 表格这里给大家看一个比较不错的表格数据渲染的例子,也是我目前所写的项目中的一部分. 这里呢我们就不给大家说顶栏和 ...
饿了么UI elementUI中的el-table勾选框设置默认勾选、禁用
最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态, 如果remark="1",是勾选状态且该勾选框变为禁用状态:反 ...
Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
vue设置多选框默认勾选_Angular/Vue多复选框勾选问题
此页面效果以Angular实现,Vue也可按照其大致流程实现,其核心本质没有改变. 功能效果为:页面初始化效果为要有所有角色的复选框,要求初始化默认勾选的角色要显示勾选,之后,能按照最终勾选的状态提交 ...
element表格默认勾选不生效的问题
默认勾选可以这样做 this.$refs.multipleTable.toggleRowSelection(row); 如果不生效的话,一般需要考虑这几种情况 1.获取数据(选中的数据以及表格展示的数 ...

Vue elementui 实现表格selection的默认勾选

Vue elementui 实现表格selection的默认勾选相关推荐

最新文章

热门文章