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

2022-09-20 17:48:08 字數 1238 閱讀 2184

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

剛好元件庫存在rowselection的配置項,既然存在拓展方法,又遇到需求,那麼就對資料進行處理了

以下方法臨時起意編寫,可能有些地方沒有考慮的很完善,也可以有些**冗雜,不過方法是可以正常使用的,由於用到了遞迴,對於資料規模大的話來說可能就沒那麼快

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

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

onselect(record, selected, selectedrows) 

this.selectedrows = [...this.selectedrows, item.value]

this.selectedrowkeys.push(item.id)

})// 去重

this.selectedrows = [...new set(this.selectedrows)]

this.selectedrowkeys = [...new set(this.selectedrowkeys)]

}} else

let index = this.selectedrowkeys.indexof(item.id)

this.selectedrows.splice(index, 1)

this.selectedrowkeys.splice(index, 1)})}

return false}},

對於上面的勾選與取消,會導致乙個問題,就是全選按鈕也不能實現全部取消或者全部勾選,於是乎全選事件也得重新寫,全選事件其實還好,就是遍歷完然後將key和資料新增到兩個資料裡面去而已

// 全選操作---自定義選中操作導致全選操作失效,從而有這個方法

onselectall(selected, selectedrows, changerows) )

this.selectedrows = rows

this.selectedrowkeys = arr

} else

}

最後還有乙個預設展開整棵table樹的方法也是遞迴

使用的是這裡的屬性賦值

fnchildren(data) 

})return data

},

antd的table會渲染出多的資料的問題

在模糊查詢輸入框輸入 浙a8888 發現查詢結果有多餘的兩條資料,並且發現當清空查詢條件,每次根據該查詢條件查詢都會多增加一條 浙a12345 的資料,如圖 後來看控制台,一直在報key值不唯一的問題。發現後台返回兩條id相同的資料,即車牌號碼為 浙a12345 的資料 而介面恰好是拿該dispos...

antd樹型選擇控制項選擇父級 jQuery選擇器

語法 名稱 用法 id id選擇器 id屬性值 class 類選擇器 class屬性值 element 標籤選擇器 標籤名 seletor1,集合選擇器 id屬性值,class屬性值,標籤名 seletor2,this 當前元素 this 操作的是誰就指向誰 萬用字元選擇器 匹配所有元素 用法 描述...

樹型物件的table展現形式思考

img 如圖所示 近日專案中需要將乙個動態樹型結構以 動態合併行形式實現,目前的實現方式是通過後台輸出tr,td,總感覺不是很好,我想請教一下,是否有這種已經做好的通用轉換jar包或是js包,通過傳入乙個tree物件,可以轉換成頁面table形式呢?目前這個tree物件從後台遞迴查詢出來,各節點可提...