2021-05-25 element中table表格使用 type=expand時,如果不要箭頭的話也可以做到手動設置展開或關閉子級內容

背景：

       當行內容過多並且不想顯示橫向滾動條時，可以使用table展開行功能。

通過設置  type="expang" 和  scoped slot 可以開啟展開行功能， el-table-column 的模板會被渲染成為展開行的內容，展開行可
訪問的屬性與使用自定義列模板時的 scoped slot 相同。

<template>
  <el-table
    ref="table"
    border
    highlight-current-row
    :data="tableData"
    style="width:100%">
    <el-table-column type="expand" width="1">
      <template slot-scope="props">
         // 這里面可以放任何任何，例如 table，form表單等等
         <el-form label-positioni="left" inline class="demo-table-expand">
            <el-form-item label="商品名稱">
               <span>{{props.row.name}}</span>
            </el-form-item>
            <el-form-item label="商品描述">
               <span>{{props.row.desc}}</span>
            </el-form-item>
         </el-form>
      </template>
    </el-table-column>
    <el-table-column label="操作欄">
      <template slot-scope="scope">
         <el-button size="mini" type="text" @click="handleDetail(scope.row)">詳情</el-button>
      </template>
    </el-table-column>
    <el-table-column label="商品名稱" prop="name"></el-table-column>
    <el-table-column label="描述" prop="desc"></el-table-column>
  </el-table>
</template>

<style>
  .demo-table-expand{
     font-size:0;
  }
  .demo-table-expand label {
     width:90px;
     color:red;
  }
  .demo-table-expand .el-form-item{
     margin-right:0;
     margin-bottom:0;
     width:50%;
  }
</style>

<script>
  export default{
     data(){
       return {
          tableData:[{
             id:'acdef',
             name:'測試一',
             desc:'描述測試一',
          }],
       }
     },
     methods:{
        // 詳情
        handleDetail(row){
           this.$refs.table.toggleRowExpansion(row);
        }
     }
  }
</script>

 效果：

 

 

 細節問題：

為什么會使用到這個方法（toggleRowExpansion）的原因呢？

由於 我們一般會點擊按鈕去展開查看詳情，所以我們替換箭頭為 ‘查看詳情’按鈕，通過 toggleRowExpansion 方法展開合閉 expand。


因為設置了 <el-table-column type="expand" width="1"></el-table-column> 會多出1px的邊距，所以，需要在最外層放一個空的div，設置樣式
overflow:hidden; 再設置此 table的樣式 margin-left:1px 。


重點來了， toggleRowExpansion 方法也支持手風琴效果，點擊展開子級的同時關閉原先除子級之外的已打開的展開項，實現手風琴，修改 查看詳情方法：

handleDetail(row){
   this.tableData5.map((item)=>{
      if(row.id != item.id){
        this.$refs.table.toggleRowExpansion(item, false);
      }
   })
   this.$refs.table.toggleRowExpansion(row);
}

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

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

 

參考鏈接： https://www.cnblogs.com/jiajialove/p/11477679.html