elmentui-table 点击收缩展开

官方地址：Element - The world's most popular Vue UI framework

 

 

根据官方文档使用 type="expand" 和 Scoped slot 可以开启展开行功能

使用type="expand"的时候，自带的样式是一个箭头，可以修改图标的样式，使用背景图可以更换收缩展开的图标样式

上述方法有个弊端，点击收缩展开按钮自动展开收起，但是我们的需求是点击的时候调接口拿到收缩展开的内容后再展开，所以我们使用this.$refs.table.toggleAllSelection (row, true)展开行，将收缩行宽度设置为1,然后设置cssdisplay:none

代码如下：

<el-table
      ref="soundRecordTable"
      class="sound-record-table"
      :data="soundRecordList"
    >
      <el-table-column align="center" prop="callPhone" label="电话号码" width="110">
        <template slot-scope="scope">
          {{ scope.row.callPhone |noDataFilter }}
        </template>
      </el-table-column>
      <el-table-column v-if="hasOperate" align="center" label="操作" width="49">
        <template slot-scope="scope">
          <div v-if="scope.row.answerType===1" class="sound-record-btn-box">
            <img v-if="openTableLineId === scope.row.callHistoryId" :src="playImg" class="sound-record-btn" @click="clickShowqi(scope.row)">
            <img v-else :src="choosePlayImg" class="sound-record-btn" @click="clickZhankai(scope.row)">
          </div>
          <div v-else style="line-height: 26px">--</div>
        </template>
      </el-table-column>
      <el-table-column type="expand" width="1">
        <div slot-scope="scope">
            展开内容
        </div>
      </el-table-column>
    </el-table>

<script>
    clickZhankai(row) {
      this.$refs.soundRecordTable.toggleRowExpansion(row, true)
    }

</script>
<style>
.sound-record-table.el-table {
   th {
      &.el-table__expand-column {
        display: none;
      }
    }
    tr {
      td.el-table__cell, th.el-table__cell.is-leaf {
        &.el-table__expand-column {
          display: none;
        }
      }
      td.el-table__cell.el-table__expanded-cell {
      }
    }
  }
</style>