實現(xiàn)效果

1基协、不點擊小箭頭，點擊其他列中的某個按鈕展開行內(nèi)容菇用。

2、隱藏小箭頭列（既然我們點擊表格其他單元格展開行內(nèi)容了陷揪，一般就不需要小箭頭列了）

3惋鸥、只展開一行內(nèi)容

先直接上代碼：

<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: '荷蘭優(yōu)質淡奶，奶香濃而不膩1',
      }, {
        id: '2',
        name: '好滋好味雞蛋仔2',
        desc: '荷蘭優(yōu)質淡奶悍缠，奶香濃而不膩2',
      }, {
        id: '3',
        name: '好滋好味雞蛋仔3',
        desc: '荷蘭優(yōu)質淡奶卦绣，奶香濃而不膩3',
      }, {
        id: '4',
        name: '好滋好味雞蛋仔4',
        desc: '荷蘭優(yōu)質淡奶，奶香濃而不膩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

自己項目中遇到的問題是想要隱藏小箭頭列趴拧，無意間發(fā)現(xiàn)這篇文章溅漾，原來只需要設置width="1"就行了。

因為我設置了**<el-table-column type="expand" width="1"></el-table-column> **會多出1px的邊距著榴，所以我們可以再在最外層放一個空的div添履，設置樣式overflow:hidden；
再設置此table的樣式margin-left:1px脑又；好了暮胧，完美實現(xiàn)锐借。（自己的項目中沒有遇到1px影響效果的情況，可以直接設置寬度為1px即可）