Element-ui el-table 樹形表格多選


大家平時使用el-table時,想必一定使用過表格里面的多選吧,那么selection-change事件一定很熟悉吧,觸發該事件時我們可以獲取到所有被選中的數據。

產品需求:

如圖所示,點擊不同父級下的子級時,想要獲取到所有被選中的數據

問題:

在具體場景中使用selection-change事件只能監聽到同一父級下的變動,根本無法同時獲取到其他父級下的被選中項。

解決辦法:

第一步:給el-table綁定ref="table",

第二步:勾選完畢后,點擊如圖所示右上角的按鈕時 ,console.log(this.$refs.table)              //注意:名字要與第一步綁定的名字一致

如圖下圖所示,為打印出來的數據,由於頁面顯示屏大小有限,沒能給大家截除完成的圖片,順着圖中一直往下滑,會看到一個selection屬性,selection中的數據為當前父級中被選中項的數據,要想獲取到所有父級下的選中項需要進行for循環,這樣就可以拿到所需要的數據了。

 

大家有不清楚的地方,可以隨時聯系我進行一 一解答。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM