关于Element-ui中table默认选中toggleRowSelection问题_vue.js_

Element-ui中table默认选中toggleRowSelection

一.toggleRowSelection

toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中

注意：调用toggleRowSelection这个方法 需要获取真实dom 所以需要注册 ref 来引用它 

二.操作

(一).默认选中

1.当数据源固定在table的

(二).点击tr选中

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

row-click  点击行事件

(三).获取选中的值

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

2.data 中设置sels:[]

三.案例

1.table tr 点击 复选框选中  再次点击 复选框取消选中

①设置一个全局函数

exports.install = function (Vue, options) { //删除数组 指定的元素 Vue.prototype.removeByValue=function(arr, val){ for(var i=0; i

②table.vue

Element-ui踩坑之表格选中toggleRowSelection问题

今天遇到一个表格选择默认的问题，表格当前页没有值，但是默认还是选中的，这个时候想要删除表格选择：

this.$nextTick(()=>{    this.$refs.multipleTable.selection.forEach((select,index)=>{       if(select.id === this.selectedTableData[data].id){            this.$refs.multipleTable.toggleRowSelection(select,false);       }    }) })

• 要点1，加this.$nextTick（()=>{}）；
• 要点2，选择的值要从table的selection中取，应该key的变化问题。

由于篇幅较短，再加一点之前踩的坑记录：

仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

:row-key="getRowKeys" //多选时需要 getRowKeys(row) {   return row.id; },

这种翻页之类的多选就会保留数据。

再说一个想要清空表格的所有选择：

this.$refs.multipleTable.clearSelection(）

还有全选表格行：

this.$refs.multipleTable.toggleAllSelection()

后面遇到再做补充…… 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！