element-ui中table组件的toggleRowSelection()方法使用
作者：helloworld！！！？
element-ui中table组件的toggleRowSelection()方法
最近，在做关于翻页导出功能时，遇到需要将前面勾选过的选项进行回显的情况，因为table组件在每次翻页的时候，都会清空上一页勾选的选项，在切换回前一页时，勾选过的选项不会保存。因此需要借助toggleRowSelection()方法设置勾选项。
toggleRowSelection()需要页面渲染完毕之后才有效，因此需要放在this.$nextTick中，如果只有一页数据，这样就可以了，但是在有多页数据的情况下，每次翻页就会请求数据，进行数据更新，因此this.$nextTick需要放在updated回调中，等数据更新和页面渲染都完成时，才有效。如下所示。
updated() {
this.$nextTick(() => {
this.tableData.forEach(outerItem => {
this.selectRows[this.page.current - 1] && this.selectRows[this.page.current - 1].forEach(item => {
if(outerItem.d == item.d) {
this.$refs.caseTable.toggleRowSelection(outerItem,true);
}
})
})
})
}还有一个问题，如上所示，tableData中是传入到table组件中的数据，而selectRows是我保存的勾选的数据，按理说数据的格式完全一样，但是我向toggleRowSelection传递参数时，只能传递outerItem，也就是传入table组件的数据，传入item则无效。具体原因还不是太清楚，但我想应该是因为两个引用类型的地址不同引起的。
element-ui中table默认选中toggleRowSelection
一.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>三.案例
1.table tr 点击 复选框选中 再次点击 复选框取消选中
①设置一个全局函数
exports.install = function (Vue, options) {
//删除数组 指定的元素
Vue.prototype.removeByValue=function(arr, val){
for(var i=0; i<arr.length; i++) {
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
};
};②table.vue
<template>
<el-table :data="tableData3" ref="multipleTable" @row-click="handleCurrentChange" @selection-change="selsChange">
<el-table-column type="selection" width="55" ></el-table-column>
<el-table-column type="index" label="序号" width="60"></el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData3: [{
id:'1',
date: '2016-05-03',
name: '嘎哈和',
address: '上海市普陀区金沙江路 1518 弄',
sex:'1'
}, {
id:'2',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
sex:'0'
}, {
id:'3',
date: '2016-05-02',
name: '莫默模',
address: '上海市普陀区金沙江路 1518 弄',
sex:'-1'
}],
arrID:[],
}
},
methods: {
formatSex: function (row, column, cellValue, index) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
// 点击事情
handleCurrentChange(row, event, column){
var same=false;
if(this.arrID.length > 0){
for(var i=0; i<this.arrID.length ;i++){
if(this.arrID[i]==row.id){
same=true;
this.removeByValue(this.arrID, row.id);
break;
}
}
if(same==true){
this.$refs.multipleTable.toggleRowSelection(row,false);
}else{
this.$refs.multipleTable.toggleRowSelection(row,true);
this.arrID.push(row.id);
}
}else{
this.$refs.multipleTable.toggleRowSelection(row,true);
this.arrID.push(row.id);
}
},
selsChange(val){
var valId=[];
for(var i=0;i<val.length;i++){
var arrIDsame=false;
valId.push(val[i].id);
}
this.arrID=valId;
}
},
mounted() {
this.$refs.multipleTable.toggleRowSelection(this.tableData3[2],true);//默认选中
}
}
</script>
<style>
</style>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。