官網(wǎng)盡管提供了toggleRowSelection方法，但沒有提供demo實例。
創(chuàng)新互聯(lián)公司是一家專注于成都做網(wǎng)站、網(wǎng)站設計與策劃設計,雙鴨山網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設10年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:雙鴨山等地區(qū)。雙鴨山做網(wǎng)站價格咨詢:18982081108
通過了解，結(jié)合vue的特殊屬性ref引用到Dom元素上，再執(zhí)行dom上的toggleRowSelection方法。
以下通過三種不同的數(shù)據(jù)來源實現(xiàn)table默認勾選對應的列：
1、固定寫在data數(shù)據(jù)里：
注意el-table上有一個ref="table"的屬性
{{ scope.row.date }} ajax
在勾子函數(shù)mounted里執(zhí)行checked方法，可以自行測試在實例掛載之前beforeMount和掛載后mounted均使用。
this.$refs.table.toggleRowSelection(this.tableData3[0],true);就是本文的默認勾選的重點，toggleRowSelection(row, selected)接受兩個參數(shù)，row傳遞被勾選行的數(shù)據(jù)，selected設置是否選中，這個官網(wǎng)寫得很清楚就不多說了。
重慶分公司
重慶分公司
var Main = {
data() {
return {
tableData3: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}],
multipleSelection: []
}
},
mounted(){
this.checked();//每次更新了數(shù)據(jù)，觸發(fā)這個函數(shù)即可。
},
methods: {
checked(){
//首先el-table添加ref="table"引用標識
this.$refs.table.toggleRowSelection(this.tableData3[0],true);
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')2、頁面一加載使用ajax獲得數(shù)據(jù)：
這里使用定時器摸擬了一下。
var Main = {
data() {
return {
tableData3: [],
multipleSelection: []
}
},
mounted(){
var _this = this;
setTimeout(function(){
_this.tableData3 = [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}];
_this.$nextTick(function(){
_this.checked();//每次更新了數(shù)據(jù)，觸發(fā)這個函數(shù)即可。
});
},3000);
},
methods: {
checked(){
//首先el-table添加ref="table"引用標識
this.$refs.table.toggleRowSelection(this.tableData3[0],true);
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')3、一開始并沒有數(shù)據(jù)時：
var Main = {
data() {
return {
tableData3: [],
multipleSelection: []
}
},
beforeMount() {
},
methods: {
checked(){
//首先el-table添加ref="table"引用標識
this.$refs.table.toggleRowSelection(this.tableData3[2],true);
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
get(){
var datas=[{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}];
this.tableData3 = datas;
this.$nextTick(function(){
this.checked();//每次更新了數(shù)據(jù)，觸發(fā)這個函數(shù)即可。
})
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
