vue+element实现表格点击行可以展开功能

vue+element的例子上只提供了点击图标展开，现在需要点击表格的行也可以展开表格

实现功能如上图所示，不仅可以点击小标展开，也可以点击整行展开
这个功能的需求是：点击小标或者这一整行的时候，去请求后台数据，然后再展示
我们需要用到的是element官方提供的点击事件 row-click 以及实现展开折叠的方法 toggleRowExpansion
element里面的表格组件的四个属性（有可能会用到的）

:row-key="getRowKeys"  //可以不需要
:expand-row-keys="expands" // 可以不需要
@expand-change="getFacilityList"// 请求数据
@row-click="clickRowHandle"  //控制展开

row-key：行数据的 Key，用来优化 Table 的渲染；
expand-row-keys:可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
expand-change:当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）
row-click:当某一行被点击时会触发该事件
部分代码如下：

      <el-table
        v-loading="loading"
        ref="evtTable"
        :data="instructDetailData"
        stripe
        height="300px"
        class="system-table"
        @expand-change="getFacilityList"
        @row-click="clickRowHandle">
  
        <el-table-column type="expand">
          <template slot-scope="props">
            <div style="padding-left: 60px;padding-bottom: 5px;">
              <div class="his-content">
                <p 
                  v-if="props.row.dataArr.person.length"
                  class="bluePerson">人员</p>
                <div
                  v-for="item in props.row.dataArr.person"
                  :key="item.id" 
                  class="person-inline">
                  <div>
                    <span 
                      v-if="item.status === 0" 
                      :title="item.name"
                      class="ellipsis">
                      <el-badge
                        is-dot
                        class="item"><i class="icon-weidu"/></el-badge>
                      {{ item.name }}
                    </span>
                    <span
                      v-if="item.status === 1"
                      :title="item.name"
                      class="ellipsis">
                      <i class="icon-yidu"/>{{ item.name }}
                    </span>
                  </div>
                </div>
                <p 
                  v-if="props.row.dataArr.ship.length"
                  class="orangeShip">船舶</p>
                <div
                  v-for="item in props.row.dataArr.ship"
                  :key="item.id"
                  class="ship-inline" >
                  <div>
                    <span
                      v-if="item.status === 0"
                      :title="item.name"
                      class="ellipsis">
                      <el-badge
                        is-dot
                        class="item"><i class="icon-weidu"/></el-badge>
                      {{ item.name }}
                    </span>
                    <span
                      v-if="item.status === 1"
                      :title="item.name"
                      class="ellipsis">
                      <i class="icon-yidu"/>{{ item.name }}
                    </span>
                  </div>
                </div>
               
              </div>
            </div>
          </template>
        </el-table-column>



        <el-table-column
          width="140"
          prop="userName"
          label="发送人"/>
        <el-table-column
          width="140"
          prop="time"
          label="发送时间">
          <!-- <template slot-scope="scope">
            {{ scope.row.time?getTimeStr(scope.row.time):'-' }}
          </template> -->
        </el-table-column>
        <!-- <el-table-column
          width="100"
          prop="userName"
          label="接收人"/> -->
        <el-table-column
          prop="content"
          label="发送内容"/>
      </el-table>

toggleRowExpansion：用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）
参数：row, expanded
js代码：

 clickRowHandle(row) {
   this.$refs.evtTable.toggleRowExpansion(row);
 },
 getFacilityList(row, expandedRows) {
   // console.log(expandedRows);
   if (expandedRows.length !== 0) {
     this.getReceiver(row);//展开行的时候获取数据的方法
   }
 },

如果不是点击行请求数据，而是一开始数据就都有了，可以按照下面这种写法
element是这样说的

通过设置 type=“expand” 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

   <el-table
     :data="questionData"
     :row-key="getRowKeys"
     :expand-row-keys="expands"
     stripe
     class="system-table"
     height="calc(100% - 170px)"
     @row-click="clickRowHandle"
   >
     <el-table-column type="expand">
       <template slot-scope="scope">
         <div style="padding-left: 60px;">
           <div v-if="scope.row.titleAnswersList.length && scope.row.titleType !== '04'">
             <h2 style="font-size: 14px;">题目选项</h2>
             <div
               v-for="item in scope.row.titleAnswersList"
               :key="item.id" >
               <p>{{ item.answersCode }}:{{ item.answersContent }}</p>
             </div>
           </div>
           <div>
             <h2 style="font-size: 14px;">备注</h2>
             <div>{{ scope.row.description || '暂无备注' }}</div>
           </div>
         </div>
       </template>
     </el-table-column>

   // 获取row的key值
   getRowKeys(row) {
     return row.id;
   },
   // 要展开的行，数值的元素是row的key值
   expands: [],
 clickRowHandle(row, column, event) {
   if (this.expands.includes(row.id)) {
     this.expands = this.expands.filter(val => val !== row.id);
   } else {
     this.expands.push(row.id);
   }
 },