VUE EL-ELEMENT table默认选中
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()
})
进行过滤,默认选中符合条件的。