Element-ui 中table 默认选中 toggleRowSelection

Love The Way You Lie 2021-09-15 07:28 688阅读 0赞

一.toggleRowSelection

[查看官网][Link 1]

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

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

二.操作

(一).默认选中

1.当数据源固定在table的

(二).点击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>

![20180428165821746][]

参考：[Element 默认勾选表格 toggleRowSelection][Element _ toggleRowSelection]

[Link 1]: http://element-cn.eleme.io/#/zh-CN/component/table%23table-column-attributes
[20180428165821746]: /images/20210813/7ef65e64c34a4f1b93f190101ad112de.png
[Element _ toggleRowSelection]: https://segmentfault.com/a/1190000009101950