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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。