????????前面講了屬性的添加，添加完成后，數據庫中已經存在數據了，這時再繼續商品的添加時，就可以進行屬性的選擇了。

????????在商品添加過程中，屬性選擇是一個關鍵步驟。首先，界面需要展示嵌套的屬性數據，用戶通過點擊選擇屬性。選中后，系統會通過一個盒子展示所選屬性，若沒有值則不展示。為了處理選中屬性，定義了一個存儲數據的數組，并通過代碼clickConfirmSelect進行選中和處理。該函數首先過濾出父級和子級屬性中被選中的項，然后進行映射處理，最終將選中的屬性數組保存到商品信息中，并關閉彈窗。這一過程確保了屬性選擇的準確性和數據的即時展示。

1、界面情況回顧

屬性顯示其實是個一嵌套的數據顯示。

2、選中的界面

3、選中后的展示

通過上面的圖片我們要展示，就需要寫一個盒子，沒有值就不展示，有就需要使用該盒子進行展示。而且還需定義個存儲概述據的數組。

然后再將數據讀取出來展示在頁面上。

4、選中和處理

4.1 選中：執行clickConfirmSelect

4.2 處理代碼：

			//點擊確認選擇clickConfirmSelect() {let arr = this.skuArr.filter(item => {let state = item.children.some(child => child.checked)return item.checked && state}).map(item => {let children = item.children.filter(child => {return child.checked})return {...item,children}})this.goodsFormData.sku_select = arrthis.$refs.attrWrapPop.close();},

4.3 主要的代碼，點擊選中后的處理：

?????? 4.3.1? 第一步：點擊頁面上添加屬性 這里就會讀取數據，并執行 this.getSkuData();

4.3.2 第二步：再是 點擊彈窗上的選擇值，進行提交，此時，頁面進行獲取 sku_select? 展示，并保存到商品信息里面 goodsFormData 保存。

??????????? //點擊確認選擇 是在彈出框上選
??????????? //some 數組至少有一個滿足 沒有就是false?? every就是每一個都要滿足，不滿足就是false
??????????? // 這里filter 選出父級屬性 checked =true 被選中的 且子級屬性有一個被選中的數組對象；
??????????? // 然后再對選中的對象，逐一進行map運算
??????????? //運算就是filter 過濾出來選中的子級元素
??????????? //返回一個 數組 arr 且元素為一個對象，對象展開了item ，然后將children的值放到里面，覆蓋item中的children
??????????? clickConfirmSelect() {
??????????????? let arr = this.skuArr.filter(item => {
??????????????????? let state = item.children.some(child => child.checked) ?
??????????????????? return item.checked && state
??????????????? }).map(item => {
??????????????????? let children = item.children.filter(child => {
??????????????????????? return child.checked
??????????????????? })
??????????????????? // console.log(item,11111111);
??????????????????? // console.log(children,2222222);
??????????????????? return {
??????????????????????? ...item,
??????????????????????? // children?? //覆蓋了item中children
??????????????????? }
??????????????? })
??????????????? this.goodsFormData.sku_select = arr?? //賦值后，頁面在使用這個數組來顯示? 立即回顯
??????????????? this.$refs.attrWrapPop.close();?? //關閉掉彈窗
??????????? },

、