Element默认勾选表格toggleRowSelection的实现
官网尽管提供了toggleRowSelection方法，但没有提供demo实例。
创新互联公司是一家专注于成都做网站、网站设计与策划设计,双鸭山网站建设哪家好?创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:双鸭山等地区。双鸭山做网站价格咨询:18982081108
通过了解，结合vue的特殊属性ref引用到Dom元素上，再执行dom上的toggleRowSelection方法。
以下通过三种不同的数据来源实现table默认勾选对应的列：
1、固定写在data数据里：
注意el-table上有一个ref="table"的属性
{{ scope.row.date }} ajax
在勾子函数mounted里执行checked方法，可以自行测试在实例挂载之前beforeMount和挂载后mounted均使用。
this.$refs.table.toggleRowSelection(this.tableData3[0],true);就是本文的默认勾选的重点，toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中，这个官网写得很清楚就不多说了。
var Main = {
data() {
return {
tableData3: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
mounted(){
this.checked();//每次更新了数据，触发这个函数即可。
},
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获得数据：
这里使用定时器摸拟了一下。
var Main = {
data() {
return {
tableData3: [],
multipleSelection: []
}
},
mounted(){
var _this = this;
setTimeout(function(){
_this.tableData3 = [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}];
_this.$nextTick(function(){
_this.checked();//每次更新了数据，触发这个函数即可。
});
},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、一开始并没有数据时：
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: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}];
this.tableData3 = datas;
this.$nextTick(function(){
this.checked();//每次更新了数据，触发这个函数即可。
})
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
当前题目：Element默认勾选表格toggleRowSelection的实现
新闻来源：http://ybzwz.com/article/iesjgi.html
