使用Element時 預設勾選表格toggleRowSelection
阿新 • • 發佈:2018-12-18
頁面效果:
在頁面初始化載入時將表格中某行預設選中
使用方法:toggleRowSelection
方法名 | 說明 | 引數 |
---|---|---|
toggleRowSelection | 用於多選表格,切換某一行的選中狀態,如果使用了第二個引數,則是設定這一行選中與否(selected 為 true 則選中) | row, selected |
table表格渲染
<el-table :data="listPowerSupplyTab" border ref="listPowerSupplyTab" width="100%"
@selection-change= "handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column
prop="powerSupplyStationName"
label="供電所名稱"
width="180">
</el-table-column>
<el-table-column
prop="powerSupplyStationAddress"
label="供電所地址"
width="180">
< /el-table-column>
<el-table-column
prop="contacts"
label="聯絡人">
</el-table-column>
<el-table-column
prop="telephone"
label="電話">
</el-table-column>
<el-table-column
prop="powerSupplyMode"
label="供電方式 ">
</el-table-column>
<el-table-column
prop="capacity"
label="配電容量 ">
</el-table-column>
<el-table-column
prop="subordinatePowerSupplyBureau"
label="所屬供電局 ">
</el-table-column>
</el-table>
注意: 1、注意el-table上有一個ref="listPowerSupplyTab"的屬性 2、toggleRowSelection(row, selected)接受兩個引數,row傳遞被勾選行的資料,selected設定是否選中
使用watch監聽listPowerSupplyTab資料
watch:{
listPowerSupplyTab(n,o){
this.$nextTick( ()=> {
this.$refs.listPowerSupplyTab.toggleRowSelection(this.listPowerSupplyTab[0],true);
})
},
},
ref引用到Dom元素上,再執行dom上的toggleRowSelection方法。