使用element表格開發(fā)時(shí)需要用到expand展開，官網(wǎng)示例沒有手風(fēng)琴展開效果，那就自己想辦法實(shí)現(xiàn)

Table Methods中有這么一個(gè)方法，應(yīng)該可以實(shí)現(xiàn)，現(xiàn)在就是改造table

Snipaste_2021-03-05_11-09-06.png

• 要實(shí)現(xiàn)展開，需要設(shè)置type=expand,這是默認(rèn)的展開行，這個(gè)現(xiàn)在肯定是不滿足我們的需求，所以設(shè)置width=1（隱藏原本的展開列），這樣設(shè)置完后頁面中會(huì)有展開圖標(biāo)，css設(shè)置一下display:none即可

<el-table-column type="expand" width="1">
     <template slot-scope="scope">
       <physics-data :row="scope.row"></physics-data>
     </template>
</el-table-column>

• 自定義實(shí)現(xiàn)，那么我們就需要有一列來充當(dāng)原本展開行的角色

<el-table-column width="60">
  <template slot-scope="scope">
    <span 
      class="table-expand-default el-icon-arrow-right" 
      :class="{'current-row_expanded': currentRowId === scope.row.id && scope.row.expanded}" 
      @click="expanedChange(scope.row)"></span>
  </template>
</el-table-column>

• 自定義展開/收起事件，這里需要注意，因?yàn)槲覀兪鞘褂米远x列代替原本展開的角色，所以為了保持原有功能，這里需要注意以下幾點(diǎn)，（如果使用文字/按鈕作為展開點(diǎn)擊按鈕，以下步驟可以忽略）
  1. 需要?jiǎng)討B(tài)綁定一個(gè)class來處理當(dāng)前行展開/收起時(shí)按鈕圖標(biāo)顯示，
  2. toggleRowExpansion()實(shí)現(xiàn)展開/收起，要實(shí)現(xiàn)手風(fēng)琴，我們需要先遍歷所有數(shù)據(jù)，收起展開行，將當(dāng)前點(diǎn)擊行展開，注意遍歷時(shí)里面的操作；
  3. 前面兩步完成后，發(fā)現(xiàn)當(dāng)我們點(diǎn)擊自定義展開按鈕，可以實(shí)現(xiàn)手風(fēng)琴效果，但是在當(dāng)前行點(diǎn)擊時(shí)會(huì)有bug出現(xiàn)，按鈕圖標(biāo)的展示是亂的，這里就需要再加一層判斷，代碼在下面，這里只做記錄

export default = {
  methods:{
    expanedChange(row){
      let appTable = this.$refs.appTable
      if(!this.currentRowId){
        this.currentRowId = row.id
        row.expanded = true;
        appTable.toggleRowExpansion(row)
      }else if(this.currentRowId === row.id){
        if(row.expanded){
          appTable.toggleRowExpansion(row,false)
        }else{
          appTable.toggleRowExpansion(row)
        }
        row.expanded = !row.expanded
      }else if(row.id !== this.currentRowId){
        this.currentRowId = row.id
        row.expanded = true
        this.tableData.map(item => {
          if(row.id !== item.id){
            appTable.toggleRowExpansion(item,false)
          }
        })
        appTable.toggleRowExpansion(row)
      }
    },
  }
}

注意點(diǎn):

在開發(fā)過程中，剛開始的實(shí)現(xiàn)是使用table原有的方法 expand-change ，但是在這個(gè)方法中去實(shí)現(xiàn)手風(fēng)琴的效果會(huì)造成程序卡死，控制臺(tái)一看是有無限循環(huán)造成zhan