Element-ui的table组件默认选中行时，如何启用toggleRowSelection实现动态切换选中状态？

本文共计1043个文字，预计阅读时间需要5分钟。

目录 + Element-ui中Table默认选中toggleRowSelection方法使用指南一. toggleRowSelection方法二. 操作说明三. 案例示例 + Element-ui踩坑之Table选中toggleRowSelection问题

目录

• Element-ui中table默认选中toggleRowSelection
• 一.toggleRowSelection
• 二.操作
• 三.案例
• Element-ui踩坑之表格选中toggleRowSelection问题

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>

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()

后面遇到再做补充……

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