elementui 樹形表格 全部展開及收起功能

elementui: v2.12.0
主要方法: toggleRowExpansion

方法名 說明 參數
toggleRowExpansion 用於可展開表格與樹形表格,切換某一行的展開狀態,如果使用了第二個參數,則是設置這一行展開與否(expanded 爲 true 則展開) row, expanded

使用: this.$refs.theTable.toggleRowExpansion(row, true)
需求簡說: 樹形表格上方提供兩個按鈕: “展開全部” “收起全部”
邏輯簡說: 遞歸遍歷賦給表格的值(tableData),依次展開或收起每一行

forArr(arr, isExpand) {
  arr.forEach(i => {
    this.$refs.theTable.toggleRowExpansion(i, isExpand)
    if (i.children) {
      this.forArr(i.children, isExpand)
    }
  })
},
expandAll() { // 默認展開全部的話,首次加載需要在$nextTick下進行
  this.forArr(this.tableData, true)
},
collapseAll() {
  this.forArr(this.tableData, false)
}

用了很多方法,折騰了好久,這個是最簡單粗暴起效的,所以說,還是要多看api啊…
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章