element-ui中table expand展开行控制显示隐藏

效果：

1、不点击小箭头，点击其他列中的某个按钮展开行内容。-通过toggleRowExpansion方法展开合闭expand
2、隐藏小箭头列（既然我们点击表格其他单元格展开行内容了，一般就不需要小箭头列了）-设置 width="1"

<template>
  <el-table ref="tables" border stripe :data="list">
    <el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <div @click="toogleExpand(scope.row)">
          <i
            class="el-icon-arrow-down"
            :class="scope.row.icon == 'down' ? '' : 'mirrorRotateLevel'"
          ></i>
          <el-button size="mini" type="text">详情</el-button>
        </div>
      </template>
    </el-table-column>
    <el-table-column type="expand" width="1">
      <template slot-scope="scope">
        <el-table :data="scope.row.expandData" ref="table">
          <el-table-column prop="amount" label="数量" />
          <el-table-column prop="itemPrice" label="单价" />
          <el-table-column prop="costs" label="金额" />
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    // 点击操作详情 出现折叠内容
    tableDatial(row, index) {
      this.list[index].icon = this.list[index].icon == "down" ? "up" : "down";
      this.$refs.tables.toggleRowExpansion(row);
    }
  }
};
</script>
<style lang="scss" scoped>
.mirrorRotateLevel {
  transform: rotateX(180deg);
}
</style>