ant-design-vue:table 指定expandedRowKeys后會導致其他的折疊按鈕無法展開與回縮-展開所有縮回所有和單項展開縮回並存開發

ant-design-vue有個bug：table 指定expandedRowKeys后會導致其他的折疊按鈕無法展開與回縮，然后我們試了defaultExpandedRowKeys也只會在首次加載起作用

expandedRowKeys：展開的行，控制屬性 字符串數組

defaultExpandedRowKeys：默認展開的行 字符串數組

兩個數據類型都一樣，功能相同，唯一區別時一個是默認的只會初始化加載依此，一個是可控的數組內的存值是要展開的行的項（內部填寫改行的key）

問題出在哪里呢：正常使用defaultExpandedRowKeys 本行沒問題，點擊某一行會展開再點會縮起。當添加功能-》一鍵全部展開縮起的時候問題就來了，因為defaultExpandedRowKeys只有初始化時候才有第二次操作無效

如果項目簡單數據量少又不想麻煩可以直接結合定時器加載完數據這樣寫：

setTimeout(()=>{//單獨設置--展開所有功能
                  this.data.forEach((val,k)=>{
                       // this.defaultExpandedRowKeys.push(val.key)
                       this.$set(this.defaultExpandedRowKeys,k,val.key)
                  })
                  // this.defaultExpandedRowKeys = []//先清空防止二次多次點擊
        },1000)

定時器要大於加載的數據

但是這樣會有延時所以體驗不太好適合自動打開加載完數據展開所有的項目

如果手動添加的話還是要用到expandd的

expandedRowKeys 結合：expand  ：點擊展開圖標時觸發（注意它是個事件，綁定業務函數Function(expanded, record)）

第一個參數是是否展開狀態布爾值，第二個參數是當前行的所有數據，可以根據數據獲取當前行的key來動態添加到this.defaultExpandedRowKeys實現展開的業務邏輯

並且不影響:expandRowByClick="true" (點擊整行進行展開縮起操作)

 

參考項目代碼：

操作按鈕：根據展開縮進切換沒有數據不可操作

<a-button  :disabled="tables.length <=1 " v-if="this.defaultExpandedRowKeys.length==0" @click="fnAllExpand">一鍵展開</a-button>
            <a-button  :disabled="tables.length <=1 " v-else @click="fnAllUnExpand">一鍵收起</a-button>

table：重點在：

:expandedRowKeys="defaultExpandedRowKeys"；

 @expand = "onexpand"（注意expand是個事件）

:expandRowByClick="true"//點擊行

 <a-table
        ref='tableA'
        bordered
       :scroll="{ x: 1300 }"
       size="middle"
       :columns="columns" :data-source="tables"
       :expandRowByClick="true"
       :expandedRowKeys="defaultExpandedRowKeys"
       @expand = "onexpand"
       :pagination="pagination"
       :rowClassName = "fnRowClass"
       >展開后內部內容。。。</a-table>

方法：

onexpand：給每個行綁定點擊可展開伸縮

onexpand(expanded, record){//綁定的點擊行事件
        // console.log(expanded, record)//expanded =true ||false,record：本行數據
        if(expanded==true){
            this.data.forEach((val,k)=>{
                    if(val.key==record.key){
                        this.$set(this.defaultExpandedRowKeys,k,val.key)
                    }          
            })
        }else{
            this.data.forEach((val,k)=>{
                    if(val.key==record.key){
                        this.$set(this.defaultExpandedRowKeys,k,'')
                    }          
            })
        }
    },
    fnAllExpand(){
        //設置全展
        setTimeout(()=>{//單獨設置--展開所有功能
                  this.data.forEach((val,k)=>{
                       // this.defaultExpandedRowKeys.push(val.key)
                       this.$set(this.defaultExpandedRowKeys,k,val.key)
                  })
                  // this.defaultExpandedRowKeys = []//先清空防止二次多次點擊
        },20)
        // this.defaultExpandedRowKeys=[]//先清空防止二次多次點擊
        console.log(this.defaultExpandedRowKeys)
    },
    fnAllUnExpand(){//設置全部收起
        setTimeout(()=>{//單獨設置--展開所有功能
        this.data.forEach((val,key)=>{
                 this.defaultExpandedRowKeys.shift(val.key)
        })
            console.log(this.defaultExpandedRowKeys)
      },20)
    },

 

也可以在初始化時先展開所有行

只要在初始化數據時添加全展方法即可：this.fnAllExpand()

實際效果：

如果想要展開子階項（所有全部展開）：只需要在展開的業務里面添加內部展開邏輯即可-（內部展開是用數據驅動所以操作數據即可）

                  this.data.map((v,i)=>{
                      if(v.lj_detail){//避免大數據量情況下報錯
                          v.lj_detail.map((k,ind)=>{
                                        this.$set(k,11,'showminus')
                                        k[2].map((kk,inin)=>{
                                            this.$set(kk,11,'展開狀態');//數組，index，value
                                        })
                          })
                      }else{
                          console.log("數據等待中")
                      }
                  })

這里注意用this.$set是防止對象數組操作數據不刷新的問題