记怎么用按钮来展开element table

[lovelmh13]

背景

element-ui的表格组件提供了type="expand"来展开行，但是方式和样式可能不是我们所需要的。

可能我们需要点一个按钮或者一段文字来做到展开

思路

1. 给表格一个ref
2. 写一列，是我们需要的样式，暂时称为：列1
3. 再写一列，使用type="expand"来展开行，但是宽度设为1，为了不显示出来 注意，这一列必须放在最后一列，否则会在它右侧那一列显示出来>箭头
4. 给列1加一个点击事件，传递当前点击的row信息，通过ref来获取table，使用element-ui table提供的toggleRowExpansion方法，把row传递进去，就可以通过自定义的样式，来开展行了。因为使用了toggleRowExpansion，就可以触发对应行的type="expand"列，来实现展开

代码

html:

<el-table
  ref="table"
  :data="list"
  element-loading-text="Loading"
  border
>
  <el-table-column
    label="操作"
    align="center"
    width="200px"
  >
    <template slot-scope="scope">
      <el-button
        type="text"
        size="mini"
        @click="detailClick(scope.row)"
      >查看详情</el-button>
      <el-divider direction="vertical"
      <el-button
        type="text"
        size="mini"
        @click="reviseClick(scope.row.id)"
      >编辑</el-button>
      <el-divider direction="vertical"
      <el-button
        type="text"
        size="mini"
        @click="deleteClick(scope.row.id)"
      >删除</el-button>
    </template>
  </el-table-column>
  <el-table-column
    type="expand"
    width="1"
  >
    <template slot-scope="scope">
      {{ scope.row }}
    </template>
  </el-table-column>
</el-table>

js:

export default {
  methods: {
    detailClick(row) {
      const table = this.$refs.table
      table.toggleRowExpansion(row)
    }
  }
}