在页面初始化加载时将表格中某行默认选中
table表格渲染
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%;
margin-top: 20px"
row-key="tunnleId"
ref="multipleTable"
@selection-change="handleSelectionChange"
>
<!-- row-key="id" // 这个属性 id表示每一行的唯一标识,用于返回id -->
<!-- <el-table-column
prop="tunnelId"
label="通道ID"
width="80"
>
</el-table-column> -->
<el-table-column
prop="tunnelName"
label="通道名称"
>
</el-table-column>
<el-table-column
type="selection"
width="58"
:reserve-selection="true"
>
<!-- :reserve-selection="true"这个必须带 表示是否显示勾选项 -->
</el-table-column>
</el-table>
data
data(){
return {
tableData: [],
multipleSelection: [], // 存放表格选中项信息
};
}
注意:
1、注意el-table上有一个ref="multipleTable"的属性
2、toggleRowSelection(row, selected)接受两个参数,row传递被勾选行的数据,selected设置是否选中
使用watch监听tableData数据
```js
watch:{
tableData() { //默认勾选上所有的选项
this.$nextTick( ()=> {
for (const item of this.tableData) {
this.$refs.multipleTable.toggleRowSelection(item,true);
}
})
}
},
至此,大功告成