使用element-ui中table expand展開行控制顯示隱藏，隱藏小箭頭列的方法，之展開一行內容

涉及知識點：

　　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 { 28  data() { 29     return { 30  tableData5: [{ 31         id: '1', 32         name: '好滋好味雞蛋仔1', 33         desc: '荷蘭優質淡奶，奶香濃而不膩1', 34  }, { 35         id: '2', 36         name: '好滋好味雞蛋仔2', 37         desc: '荷蘭優質淡奶，奶香濃而不膩2', 38  }, { 39         id: '3', 40         name: '好滋好味雞蛋仔3', 41         desc: '荷蘭優質淡奶，奶香濃而不膩3', 42  }, { 43         id: '4', 44         name: '好滋好味雞蛋仔4', 45         desc: '荷蘭優質淡奶，奶香濃而不膩4', 46  }] 47  }; 48  }, 49  methods: { 50  toogleExpand(row) { 51       let $table = this.$refs.table; 52  $table.toggleRowExpansion(row) 53  } 54  } 55 } 56 </script>

我們一般會點擊按鈕去展開查看詳情，所以我們替換箭頭為“查看詳情”按鈕，通過toggleRowExpansion方法展開合閉expand。效果如圖：

 

自己項目中遇到的問題是想要隱藏小箭頭列，無意間發現這篇文章，原來只需要設置 width="1" 就行了。

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

放上項目最終的效果圖，無多出的1px邊框。

 

 

同樣的，toggleRowExpansion方法也支持手風琴效果，點擊展開自己的同時關閉原先除自己之外的已打開的展開項，實現手風琴，修改methods→toogleExpand方法：

 

 

toogleExpand(row) { 2    let $table = this.$refs.table; 3    this.tableData5.map((item) => { 4      $table.toggleRowExpansion(item, false) 5  }) 6  $table.toggleRowExpansion(row) 7  }

 

table的toggleRowExpansion方法可以傳兩個參數，第一個參數傳row，第二個參數傳false，意思是合閉expand。我們把每行的expand關閉一次，再把對應的行打開，這樣就實現了手風琴效果了。

新的問題，當我們點擊打開了手風琴，每次都至少有一個是打開狀態的，這樣很明顯是bug了，我們做一下讓已打開行的expand合閉。

bug原因：當我們點擊已打開的expand想關閉它時，相當於走了一遍$table.toggleRowExpansion(row, false)后，又走了一遍$table.toggleRowExpansion(row)，所以這行的expand又被打開了。我們把“合閉/打開“的expand對應的行去除“合閉“操作。

修復toogleExpand方法：

toogleExpand(row) { 2    let $table = this.$refs.table; 3   this.tableData5.map((item) => { 4      if (row.id != item.id) { 5        $table.toggleRowExpansion(item, false) 6  } 7  }) 8  $table.toggleRowExpansion(row) 9  }

點擊展開內容時，遍歷外層數組，找到除了當前點擊的展開項之外的行，關閉除自己之外的已展開項，然后展開或者關閉當前點擊的行。

嗯，就醬啦~

參考文章：https://www.cnblogs.com/jiajialove/p/11477679.html