实现效果

1、不点击小箭头，点击其他列中的某个按钮展开行内容。

2、隐藏小箭头列（既然我们点击表格其他单元格展开行内容了，一般就不需要小箭头列了）

3、只展开一行内容

先直接上代码：

<template>
  <el-table ref="table" border stripe highlight-current-row :data="tableData5" style="width: 800px;">
    <el-table-column label="商品 ID" prop="id" width="100">
    </el-table-column>
    <el-table-column label="商品名称" prop="name">
    </el-table-column>
    <el-table-column label="描述" prop="desc">
    </el-table-column>
    <el-table-column label="操作" width="100">
      <template slot-scope="scope">
        <el-button type="text" @click="toogleExpand(scope.row)">查看详情</el-button>
      </template>
    </el-table-column>
    <el-table-column type="expand" width="1">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData5: [{
        id: '1',
        name: '好滋好味鸡蛋仔1',
        desc: '荷兰优质淡奶，奶香浓而不腻1',
      }, {
        id: '2',
        name: '好滋好味鸡蛋仔2',
        desc: '荷兰优质淡奶，奶香浓而不腻2',
      }, {
        id: '3',
        name: '好滋好味鸡蛋仔3',
        desc: '荷兰优质淡奶，奶香浓而不腻3',
      }, {
        id: '4',
        name: '好滋好味鸡蛋仔4',
        desc: '荷兰优质淡奶，奶香浓而不腻4',
      }]
    };
  },
  methods: {
  toogleExpand(row) {
     let $table = this.$refs.table;
     this.tableData5.map((item) => {
       if (row.id != item.id) {
           $table.toggleRowExpansion(item, false)
       }
    })
   $table.toggleRowExpansion(row)
 }
  }
}
</script>

我们一般会点击按钮去展开查看详情，所以我们替换箭头为“查看详情”按钮，通过toggleRowExpansion方法展开合闭expand。效果如图：

image.png

自己项目中遇到的问题是想要隐藏小箭头列，无意间发现这篇文章，原来只需要设置width="1"就行了。

因为我设置了**<el-table-column type="expand" width="1"></el-table-column> **会多出1px的边距，所以我们可以再在最外层放一个空的div，设置样式overflow:hidden；
再设置此table的样式margin-left:1px；好了，完美实现。（自己的项目中没有遇到1px影响效果的情况，可以直接设置宽度为1px即可）