VUE EL-ELEMENT table默认选中

VUE EL-ELEMENT table默认选中
1.toggleAllSelection（方式一：全选中）
2.toggleRowSelection（方式二：控制选中）
1.toggleAllSelection（方式一：全选中）
toggleAllSelection 用于多选表格，切换所有行的选中状态

// 给el-table 添加上ref=””
<el-table
:data=”dataList”
border
:row-style=”{height:10+’px’}”
:cell-style=”{padding:5+’px’}”
ref=”mainTable”
v-loading=”dataListLoading”
@selection-change=”selectionChangeHandle”
style=”width: 100%;”>
</el-table>
 
需要在el-table上面添加上ref=“mainTable” （mainTable -随便起）

// 获取完数据调用
this.$nextTick(function(){
this.$refs.mainTable.toggleAllSelection()
})
 
获取完数据在后面加上这段代码即可。
this.$ refs.mainTable获取名字为mainTable的组件。
this.$nextTick的作用是在DOM更新之后再执行的，防止table列表为渲染上就改变选中方式而导致无效。

2.toggleRowSelection（方式二：控制选中）
toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

// 给el-table 添加上ref=””
<el-table
:data=”dataList”
border
:row-style=”{height:10+’px’}”
:cell-style=”{padding:5+’px’}”
ref=”mainTable”
v-loading=”dataListLoading”
@selection-change=”selectionChangeHandle”
style=”width: 100%;”>
</el-table>
 
这里与上面一样。

// 获取的数据为 rows,获取完数据调用
this.$nextTick(function(){
if(rows){//判断有无数据
rows.forEach(row=>{
this.$refs.mainTable.toggleRowSelection(row)//这样为全选
//if(row.xx == xx){//判断是否默认选中某一行
//this.$refs.mainTable.toggleRowSelection(row)
//}
})
}
this.$refs.mainTable.toggleAllSelection()
})
 
进行过滤，默认选中符合条件的。

————————————————
版权声明：本文为CSDN博主「小小aBin」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40679278/article/details/108095968