Element 默认勾选表格 toggleRowSelection

官网尽管提供了toggleRowSelection方法，但没有提供demo实例。
通过了解，结合vue的特殊属性ref引用到Dom元素上，再执行dom上的toggleRowSelection方法。

以下通过三种不同的数据来源实现table默认勾选对应的列：

1、固定写在data数据里：

注意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>

在勾子函数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')