一.toggleRowSelection
通過(guò)了解，結(jié)合vue的特殊屬性ref引用到Dom元素上，再執(zhí)行dom上的toggleRowSelection方法罢缸。
toggleRowSelection(row, selected)接受兩個(gè)參數(shù)篙贸，row傳遞被勾選行的數(shù)據(jù)，selected設(shè)置是否選中
注意：調(diào)用toggleRowSelection這個(gè)方法 需要獲取真實(shí)dom 所以需要注冊(cè) ref 來(lái)引用它?
二.操作
(一).默認(rèn)選中
1.當(dāng)數(shù)據(jù)源固定在table的
mounted() {
? ? this.$refs.multipleTable.toggleRowSelection(this.tableData3[2],true);
}
(二).點(diǎn)擊tr選中
1.在table中設(shè)置?@row-click="handleCurrentChange"
row-click? 點(diǎn)擊行事件
<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);//點(diǎn)擊選中
????????}
}
}
</script>
(三).獲取選中的值
1.設(shè)置table 中@selection-change="selsChange"
2.data 中設(shè)置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 點(diǎn)擊 復(fù)選框選中? 再次點(diǎn)擊 復(fù)選框取消選中
①設(shè)置一個(gè)全局函數(shù)
exports.install = function (Vue, options) {
? ? //刪除數(shù)組 指定的元素
? ? Vue.prototype.removeByValue=function(arr, val){
? ? ? ? for(var i=0; i<arr.length; i++) {
? ? ? ? ? ? if(arr[i] == val) {
? ? ? ? ? ? ? ? arr.splice(i, 1);
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? }
? ? };
};
<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="序號(hào)" 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: '上海市普陀區(qū)金沙江路 1518 弄',
sex:'1'
? ? ? ? }, {
? ? ? ? id:'2',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄',
sex:'0'
? ? ? ? }, {
? ? ? ? id:'3',
date: '2016-05-02',
name: '莫默模',
address: '上海市普陀區(qū)金沙江路 1518 弄',
sex:'-1'
? ? ? ? }],
? ? ? ? arrID:[],
? ? }
},
methods: {
formatSex: function (row, column, cellValue, index) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
// 點(diǎn)擊事情
? ? ? ? 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);//默認(rèn)選中?
? ? }
}
</script>
<style>
</style>
