element-ui Table 组件点击一行展开

效果图如下：

对 element-ui Table 组件进行展开/收缩 icon 添加到 状态列表选项中。同时点击整行单元格进行展开/收缩。

1.首先取消点击展开/收缩 icon，改为点击整行列表进行展开/收缩。

  添加整行点击事件 row-click:  

<el-table
  ref="enquiryUnfinished"
  border
  :data="searchList.rows"
  :row-class-name="tableRowClassName"
  @expand-change="handleExpandChange"
  @selection-change="handleSelectionChange"
  @row-click="handleRowClick"
>
  ......
</el-table>

  判断单击单元格未非操作那一列时，进行展开/收缩。

async handleRowClick (row, index, e) {
  if (index.label !== '操作') {
    this.$refs.enquiryUnfinished.toggleRowExpansion(row)
  }
},

2.使用 expand-change 事件获取所有展开行的信息。

  expandedId 为所有展开的数据 id。  

async handleExpandChange (row, expandedRows) {
  this.expandedId = expandedRows.map(item => { return item.id })
  if (this.expandedId.includes(row.id)) {
    const { data } = await enquiry.getQueryQuoteList({ inquiryId: row.id })
    row.queryQuoteList = data
  }
},

3.如何隐藏 展开/收缩 的 ICON 列。

  设置了<el-table-column type="expand" width="1"></el-table-column>，再隐藏 ICON。

.el-table .el-table__expand-icon {
  opacity: 0;
}

 4.如何添加展开/收缩 ICON 到某一列中。  

<el-table
  ref="enquiryUnfinished"
  border
  :data="searchList.rows"
>
  <el-table-column type="expand" width="1">
    <template slot-scope="scope">
      <el-table
        v-if="scope.row.status === 2"
        :data="scope.row.queryQuoteList"
        border
      >
      ......
      </el-table>
    </template>
  </el-table-column>
  <el-table-column
    prop="status"
    label="状态"
    width="90px"
  >
    <template slot-scope="scope">
      <span :class="getClassCommonStatus(scope.row.status)" />
      {{ scope.row.status | enumeration(enquiryData.status) }}
      <span v-if="scope.row.status === 2">
        <i :class="expandedId.includes(scope.row.id) ? 'el-icon-arrow-down': 'el-icon-arrow-right'"></i>
      </span>
    </template>
  </el-table-column>
</el-table>

5.对于 Table 组件的表头，可能由多个字段组成，那么如何自定义表头呢？

element-ui 通过设置 Scoped slot 来自定义表头。

<el-table-column
  prop="id"
  label="询价单号 来源单号"
>
  <template slot="header">
    <div>
      <div>询价单号</div>
      <div>来源单号</div>
    </div>
  </template>
  <template slot-scope="scope">
    <p>{{ scope.row.id }}</p>
    <p>{{ scope.row.sourceNo }}</p>
  </template>
</el-table-column>