官網(wǎng)盡管提供了toggleRowSelection方法，但沒有提供demo實(shí)例。
通過了解，結(jié)合vue的特殊屬性ref引用到Dom元素上，再執(zhí)行dom上的toggleRowSelection方法。
以下通過三種不同的數(shù)據(jù)來源實(shí)現(xiàn)table默認(rèn)勾選對應(yīng)的列：
1、固定寫在data數(shù)據(jù)里：
注意el-table上有一個ref="table"的屬性
<div id="app"><template> <el-table :data="tableData3" border ref="table" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table></template><el-button type="primary" @click="get()">ajax</el-button></div>在勾子函數(shù)mounted里執(zhí)行checked方法，可以自行測試在實(shí)例掛載之前beforeMount和掛載后mounted均使用。
this.$refs.table.toggleRowSelection(this.tableData3[0],true);就是本文的默認(rèn)勾選的重點(diǎn)，toggleRowSelection(row, selected)接受兩個參數(shù)，row傳遞被勾選行的數(shù)據(jù)，selected設(shè)置是否選中，這個官網(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"引用標(biāo)識 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"引用標(biāo)識 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"引用標(biāo)識 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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
