零基础学习做网站外贸平台有哪些能直接联系老板的
1、概述
前面我们讲了布局和相应商品属性的页面布局。属性是一个弹窗，它是一个cell的组件的实现属性。点击该cell就会调用uni-popup 进行弹窗。基本的页面布局如下：
属性显示其实是个一嵌套的数据显示。
2 页面显示商品属性 点击添加属性
2.1 代码如下：
<uni-forms-item label="商品属性" ><u-cell :title="skuTitle" isLink :border="false" @click="clickSelect"></u-cell><view class="skuList"><view class="item" v-for="item in goodsFormData.sku_select" @click="clickSelect"><view class="left">{{item.skuName}}:</view><view class="right">{{skuChildName(item.children)}}</view></view></view></uni-forms-item>2.2 代码解读
cell ：
该组件就是cell单元格。一般用于一组列表的情况，比如个人中心页，设置页等，默认有一个边框，且整个可以被点击 。
title是组件显示的名称；
isLink 就是显示一个右侧的箭头；
border：不用显示默认的边框； 注意使用加v-band（也就是加 ：）
<uni-forms-item label="商品属性" >
// label 显示在界面上的文本 就是商品属性
<u-cell :title="skuTitle" isLink :border="false" @click="clickSelect"></u-cell>
// cell 实现点击的组件 title 就是 该如何显示？-----见2.3
// clickSelect 是一个函数 ----见 2.4
//下面是 显示选中后效果，后面还会继续分析
<view class="skuList">
<view class="item" v-for="item in goodsFormData.sku_select" @click="clickSelect">
<view class="left">{{item.skuName}}:</view>
<view class="right">{{skuChildName(item.children)}}</view>
</view>
</view>
</uni-forms-item>
2.3 title的计算
默认就是显示的点击添加属性，如果已经添加了属性就会进行显示，把数据传递给this.goodsFormData.sku_select
如果数据有，那就是数据库有，数据库的值也是来自于 一开始选中的，后面再来分析这个选择接口。
computed: {
skuTitle() {
if (this.goodsFormData.sku_select.length) {
let arr = this.goodsFormData.sku_select.map(item => {
return item.skuName
})
return arr.join("/")
} else {
return "点击添加属性"
}
}
},
2.4 对cell 的点击clickSelect
//点击选择属性
clickSelect() {
this.$refs.attrWrapPop.open(); //使用open方法弹出来
if (this.skuArr.length) return;
this.getSkuData(); },