1. 程式人生 > >使用Element時 預設勾選表格toggleRowSelection

使用Element時 預設勾選表格toggleRowSelection

頁面效果:

在頁面初始化載入時將表格中某行預設選中 在這裡插入圖片描述

使用方法: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方法。