Element 默認勾選表格 toggleRowSelection

官網儘管提供了toggleRowSelection方法，但沒有提供demo實例。
經過了解，結合vue的特殊屬性ref引用到Dom元素上，再執行dom上的toggleRowSelection方法。

如下經過三種不一樣的數據來源實現table默認勾選對應的列：

一、固定寫在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')

二、頁面一加載使用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')

三、一開始並無數據時：

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')