vue+element ui 学习笔记 【table篇】table默认选中选中一行setCurrentRow(row)以及默认选中多行toggleRowSelection（row,selected）

序言

根据工作的需求，需要实现两个table实现头行级联的功能，所有在调用vue实例对象后，页面挂载完后需要默认选中头的table，获取行数据的id来通过接口实现头行级联功能。干起来~~~~

1 element ui-----table默认选中一行setCurrentRow(row)

首先我们来看下官方文档：

下边我们看下代码：

<el-table
  highlight-current-row
  @current-change="selectBrand"
  ref="multipleTable"
 :data="contractbrand.data">
        <el-table-column width="55" type="index"></el-table-column>
        <el-table-column prop="autoBrand" label="签约品牌" min-width="120"  :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="brandAgentName" label="品牌经理" :show-overflow-tooltip="true"></el-table-column>
         <el-table-column label="签约类型" min-width="120" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                    <span>{{lovname(scope.row.autoType,'AUTO_TYPE')}}</span>
               </template>
        </el-table-column>
</el-table>

要想让table有选中效果，必须加上highlight-current-row这个属性（高亮当前行）；

然后我们来看一下setCurrentRow(row)==>参数row是当前选中的数据，我们在vue的生命周期函数mounted加载后，来选中table的第一条数据，借用ref绑定找到table的数据源。

  /**
     *@methods:checked
     *@description:默认选中第一行
  **/
 checked:function(){
      this.$refs.multipleTable.setCurrentRow(this.$refs.multipleTable.data[0]);
       this.currentContract = this.$refs.multipleTable.data[0];
       //任务分解
       this.$refs.multiplePlan.setCurrentRow(this.$refs.multiplePlan.data[0]);
       this.currentPlan = this.$refs.multiplePlan.data[0];
  },

实现的效果：

2 默认table多选 选中一行toggleRowSelection（row,selected）

实现的原理同上，有一点不同的是我们需要在表格里面添加一行，把表格静态html先做成可多选的

实现的代码如下：

this.$refs.multipleTable.toggleRowSelection(this.$refs.multipleTable.data[0],true);

实现的效果如下：

希望可以帮到大家