Antd組件Table樹型多選全選問題

組件庫antd里面的樹型選擇不能做到勾選父組件然后一起勾選子組件情況，我也不知道是組件庫的問題還是原本設計就是這樣

剛好組件庫存在rowselection的配置項，既然存在拓展方法，又遇到需求，那么就對數據進行處理了

 

 以下方法臨時起意編寫，可能有些地方沒有考慮的很完善，也可以有些代碼冗雜，不過方法是可以正常使用的，由於用到了遞歸，對於數據規模大的話來說可能就沒那么快

由於是在封裝a-table的基礎上進行修改，基本功能和a-table是一樣的

 首先對於勾選的選中和取消，這里耗費的事件會比較多，現在的方法還算是完善的，就是長得不好看

此方法已被優化，請看下方優化方案

onSelect(record, selected, selectedRows) { // selected 判斷是否勾選
      if (selected) {  // 添加當前節點和子節點，使其勾選
        this.selectedRowKeys.push(record.id)  // 添加當前點擊的節點
        this.selectedRows.push(record.value)  // 添加當前點擊的節點的數據
        if (!Com.isEmpty(record.children)) {  // 這里的isEmpty方法是判斷是否為空，當然也可以判斷他的長度==0
          record.children.forEach(item => {
            if (item.children) { // 如果存在子節點，進行遞歸
              this.onSelect(item, true)
            }
            this.selectedRows = [...this.selectedRows, item.value]
            this.selectedRowKeys.push(item.id)
          })
          // 去重
          this.selectedRows = [...new Set(this.selectedRows)]
          this.selectedRowKeys = [...new Set(this.selectedRowKeys)]
        }
      } else {  // 取消勾選，清空當前節點和子節點
        this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record.id), 1);
        this.selectedRows.splice(this.selectedRows.indexOf(record.id), 1)
        if (!Com.isEmpty(record.children)) {
          this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record.id), 1);
          this.selectedRows.splice(this.selectedRows.indexOf(record.id), 1)
          record.children.forEach(item => {
            if (item.children) {
              this.onSelect(item, false)
            }
            let index = this.selectedRowKeys.indexOf(item.id)
            this.selectedRows.splice(index, 1)
            this.selectedRowKeys.splice(index, 1)
          })
        }
        return false
      }
    },

對於上面的勾選與取消，會導致一個問題，就是全選按鈕也不能實現全部取消或者全部勾選，於是乎全選事件也得重新寫，全選事件其實還好，就是遍歷完然后將key和數據添加到兩個數據里面去而已

// 全選操作---自定義選中操作導致全選操作失效，從而有這個方法
onSelectAll(selected, selectedRows, changeRows) {
    if (selected) {
        let rows = []
        let arr = []
        selectedRows.forEach(item => {
            arr.push(item.id)
            rows.push(item.value)
        })
        this.selectedRows = rows
        this.selectedRowKeys = arr
    } else {
        this.selectedRows = []
        this.selectedRowKeys = []
    }
}

最后還有一個默認展開整棵table樹的方法也是遞歸

使用的是這里的屬性賦值

fnChildren(data) { // 這里的data是table的樹數據
    data.forEach((val, index, arr) => {
        this.expandedKeys.push(val.id)
        if (!Com.isEmpty(val.children)) { // 判斷是否為空 也就是判斷還是否存在子節點
            val.children = this.fnChildren(val.children)
        }
    })
    return data
},

有想法或者建議可以留言

---

2022-5-12 更新

上方選中代碼因為不規范問題，評論區已經指正，感謝大白的提醒和指導

因為取消勾選的時候會忘記判斷其他同節點的子節點存在問題，從而會導致取消本節點的同時取消其他同節點的選中，優化代碼如下：

onSelect(record, selected, selectedRows) { // selected (false取消勾選 true勾選)
      if (!selected) {  //取消勾選，清空當前節點和子節點
        // 判斷當前勾選是否存在數組中
        if(this.selectedRowKeys.indexOf(record.id)==-1){return false}
        this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record.id), 1)
        this.selectedRows.splice(this.selectedRows.indexOf(record.id),1)

        if (!Com.isEmpty(record.children)) { // 存在子節點的時候 Com.isEmpty判斷是否為空
          record.children.forEach(item => {
            if (item.children) {
              this.onSelect(item, false)
            }
            let index = this.selectedRowKeys.indexOf(item.id)
            if(index==-1) { return false }
            this.selectedRows.splice(index,1)
            this.selectedRowKeys.splice(index, 1)
          })
        }
        return false
      }else{  // 添加當前節點和子節點，使其勾選
        this.selectedRowKeys.push(record.id) // 將當前選中節點添加到數組中
        this.selectedRows.push(record.value) // 將當前選中節點對象添加到數組中
        if (!Com.isEmpty(record.children)) { // 存在子節點時
          record.children.forEach(item => {
            if (item.children) {
              this.onSelect(item, true)
            }
            this.selectedRows=[...this.selectedRows,item.value]
            this.selectedRowKeys.push(item.id)
          })
          // 去重
          this.selectedRows=[...new Set(this.selectedRows)]
          this.selectedRowKeys = [...new Set(this.selectedRowKeys)]
        }
      }
    },

因為antd版本問題，現在使用的2.x版本並不支持父子數據關聯，從而導致選中子節點，父節點不能隨着選中，本處使用了大白提供的方案進行解決（得存在父節點字段，不然就得自己手動添加父節點標識）

如果是使用的antd3.x版本的話，已經在table組件界面實現了此功能

上方是大白提供的子節點選中父節點跟隨選中方法。取消選中反向判斷一下即可