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