Element-ui 中table 默認選中 toggleRowSelection


toggleRowSelection(row, selected)接受兩個參數,row傳遞被勾選行的數據,selected設置是否選中

 

注意:調用toggleRowSelection這個方法 需要獲取真實dom 所以需要注冊 ref 來引用它 

 

.操作

 

(一).默認選中

 

1.當數據源固定在table的

 

<script>

export default {   

mounted() {

    this.$refs.multipleTable.toggleRowSelection(this.tableData3[2],true);

}

}

</script>

 

(二).點擊tr選中

 

1.在table中設置 @row-click="handleCurrentChange"

 

row-click  點擊行事件

 

<template>

<el-table :data="tableData3"  ref="multipleTable" @row-click="handleCurrentChange">

</el-table>

</template>

<script>

export default {   

methods: {

handleCurrentChange(row, event, column){

this.$refs.multipleTable.toggleRowSelection(row,true);//點擊選中

}

    }

}

</script>

 

(三).獲取選中的值

 

1.設置table 中@selection-change="selsChange"

 

2.data 中設置sels:[]

 

<template>

<el-table :data="tableData3"  ref="multipleTable" @row-click="handleCurrentChange" @selection-change="selsChange">

</el-table>

</template>

<script>

export default {   

methods: {

selsChange( val){

this.sels=val;

console.log(this.sels)

}

    }

}

</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM