序言

根據工作的需求，需要實現兩個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);

實現的效果如下：

希望可以幫到大家