Vue+element-ui+Ts封装 AProGoodsSku 创建商品属性选择

npm地址：acomponent-ui - npm 

具体操作请看文档，文档链接：AComponent-ui

适用于创建商品时属性规格组合。

 

基础用法代码

 <template>
       <div>
            <AProGoodsSku
                :goodsData="goodsData"
                @change="change">
                <template v-slot:table>
                    <el-table-column label="价格(元)" align="center" width="160">
                        <template slot-scope="scope">
                            <AProInput
                               size="mini"
                               :model.sync="scope.row.goodsPrice"
                               placeholder="请输入价格"
                               :isFormItem="false"
                               isPrice
                               clearable
                             />
                        </template>
                    </el-table-column>
                </template>
            </AProGoodsSku>
            <div style="padding-top: 20px">{{value}}</div>
            <div v-if="value.length" style="padding-top: 20px">skuid组合（pIdCombination）：{{value[0].pIdCombination}}</div>
            <div v-if="value.length" style="padding-top: 20px">spu组合名（nameCombination）：{{value[0].nameCombination}}</div>
            <div v-if="value.length" style="padding-top: 20px">spu组合值（valCombination）：{{value[0].valCombination}}</div>
       </div>
  </template>

  <script>
    export default {
        data() {
            return {
                value: [],
                goodsData: [
                    {
                        privateSpecName: '颜色', //规格名
                        id: '1',
                        dynamicList: [
                            { name: '天蓝', value: 1 },
                            { name: '灰色', value: 2 },
                            { name: '白色', value: 3 },
                            { name: '黑色', value: 4 }
                        ] //规格值数组
                    },
                    {
                        privateSpecName: '内存', //规格名
                        id: '2',
                        dynamicList: [
                            { name: '64G', value: 10 },
                            { name: '128G', value: 12 },
                            { name: '256G', value: 13 }
                        ] //规格值数组
                    },
                    {
                        privateSpecName: '型号', //规格名
                        id: '3',
                        dynamicList: [
                            { name: 'Xs', value: 20 },
                            { name: 'XsMax', value: 21 }
                        ] //规格值数组
                    }
                ]
            }
        },
        methods: {
            change(value) {
                this.value = value
            }
        }
    }
  </script>