Element-ui the table is selected by default Togglerowselection

I. togglerowselection

View the website

Togglerowselection (Row, selected) accepts two parameters, row passes the data that is Shang, selected setting is selected

Note: Calling Togglerowselection This method requires obtaining the real DOM, so you need to register ref to refer to it

Two. Operation

(i). Default check

1. When the data source is fixed to the table

<script>
Export Default {   
	mounted () {this
    	. $refs. Multipletable.togglerowselection ( this.tabledata3[2],true);
	}
</script>

(b). Click TR Select

1. Set @row-click= "Handlecurrentchange" in table

Row-click Click on line Events

<template>
	<el-table:d ata= "tableData3"  ref= "multipletable" @row-click= "Handlecurrentchange" >
	</el-table>
</template>
<script>
Export Default {   
	methods: {
		Handlecurrentchange (Row, event, column) {this
			. $refs. Multipletable.togglerowselection (row,true);//Click to select
		}
    }
}
</script>

(iii). Get the selected value

1. Set table in @selection-change= "Selschange"

Set sels:[in 2.data]

<template>
	<el-table:d ata= "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>

Three. Case studies

1.table TR Click checkbox Select again click CheckBox Uncheck

① set a global function

Exports.install = function (Vue, options) {
    //delete array-specified element
    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:d ata= "tableData3" ref= "multipletable" @row-click= "Handlecurrentchange" @ Selection-change= "Selschange" > <el-table-column type= "Selection" width= "" ></el-table-column> < El-table-column type= "index" label= "serial number" width= "a" ></el-table-column> <el-table-column prop= "Sex" label= "Gender" width= "formatter=": "Formatsex" ></el-table-column> <el-table-column prop= "date" label= "dates" > </el-table-column> <el-table-column prop= "name" label= "name" ></el-table-column> < El-table-column prop= "Address" label= "addresses" ></el-table-column> </el-table> </template> <
				Script> Export Default {data () {return {tableData3: [{id: ' 1 ', Date: ' 2016-05-03 ', Name: ' Gala and ', Address: ' 1518 Nong, Jinsha Road, Putuo District, Shanghai, Sex: ' 1 '}, {id: ' 2 ', Date: ' 2016-05-02 ', nam E: ' Wang Xiao Hu ', Address: ' 1518, Jinsha Road, Putuo District, Shanghai, Sex: ' 0 '}, {ID:' 3 ', Date: ' 2016-05-02 ', Name: ' Mommer ', Address: ' 1518 Nong, Jinsha Road, Putuo District, Shanghai, Sex: '-1 '}], arrid:[ ],}, methods: {formatsex:function (row, column, Cellvalue, index) {return row.sex = 1? ' Male ': row.sex = 0?
		' Female ': ' Unknown ';
            //Click on things 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=TR
						Ue
						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);//Default Check} &
 Lt;/script> <style> </style>

Reference: Element default Check Form Togglerowselection