element table 通过点击行 开关展开行

element table expand 展开行，示例里面仅点击前面的图标可展开。现需要点击行就可以展开和关闭。
需要使用到的属性有：

   <el-table
        v-loading="tableLoading"
        ref="dialogTable"
        :data="tableData"
        border
        style="width: 100%;"
        :height="'calc(100vh - 240px)'"
        row-key="id"
        :expand-row-keys="expands"
        @expand-change="openExpand"
        @row-click="handeleOpenMessageData"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <div v-loading="expandLoading">
              <el-form label-position="left">
                <el-form-item label="事件内容">
                  <span>{{ props.row.eventData }}</span>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" width="240" show-overflow-tooltip />
      //  ...
 </el-table>

data:{
 return {
 	expands: [],
 	//...
 }
}

本项目里，由于展开行里的内容，是另一请求返回的内容。

  // 行点击事件
    handeleOpenMessageData(row) {
      this.openExpand(row, [row]);
    },
   // 展开事件
    openExpand(row, rows) {
      if (this.expands[0] == row.id) {
        this.expands = [];
        return;
      }
      this.expands = [rows.pop().id];
      if (!row.eventData) {
        let params = {
          id: row.id
        };
        this.expandLoading = true;
        this.$api.EventBus.GetEventPublishMessageRecordDetailAsync(params)
          .then(res => {
            row.eventData = res.data.eventData;
            this.$refs.dialogTable.height = "calc(100vh - 241px)";
          })
          .finally(() => {
            this.expandLoading = false;
          });
      }
    },

展现的效果是手风琴模式的，通过点击行内容，控制行的展开与关闭。但需要注意的是，在搜索新的数据，或者翻页的时候，要记得把 expands 数据清空，不然会出现样式错误。
还有一点就是，当 table的内容只有一行，并且这一行的开展内容过多而并且超出的table高度的，这个时候table不会自适应出现滚动条，但在第二次点击的时候会自适应出现滚动条。我这里是在请求事件里面将table的高度 减少1px ，就可以在第一次的时候自适应。