大家平時使用el-table時,想必一定使用過表格里面的多選吧,那么selection-change事件一定很熟悉吧,觸發該事件時我們可以獲取到所有被選中的數據。
產品需求:
如圖所示,點擊不同父級下的子級時,想要獲取到所有被選中的數據
問題:
在具體場景中使用selection-change事件只能監聽到同一父級下的變動,根本無法同時獲取到其他父級下的被選中項。
解決辦法:
第一步:給el-table綁定ref="table",
第二步:勾選完畢后,點擊如圖所示右上角的按鈕時 ,console.log(this.$refs.table) //注意:名字要與第一步綁定的名字一致
如圖下圖所示,為打印出來的數據,由於頁面顯示屏大小有限,沒能給大家截除完成的圖片,順着圖中一直往下滑,會看到一個selection屬性,selection中的數據為當前父級中被選中項的數據,要想獲取到所有父級下的選中項需要進行for循環,這樣就可以拿到所需要的數據了。
大家有不清楚的地方,可以隨時聯系我進行一 一解答。