属性规格表(展示和添加) sku

 属性值的添加和展示

也就是货品列表

点击货品列表进入下图展示

 规格属性值的展示代码如下(展示页面)

<form enctype="multipart/form-data" action="{:url('goods/sku')}" method="post" name="theForm">
            <!-- 通用信息 -->
            <table width="90%" id="general-table" align="center" style="display: table;">
                <tbody>
                <tr>
                    <input type="hidden" name="goods_id" value="{$id}">
                    <td>规格组合</td>
                    <td>货号:</td>
                    <td>市场价:</td>
                    <td>本店价:</td>
                    <td>库存数量:</td>
                </tr>
                {volist name="arr" id="v"}
                <tr>
                    <td>{$v.name}</td>
                    <input type="hidden" name="group_id[]" value="{$v.ids}">
                    <input type="hidden" name="value_name[]" value="{$v.name}&#
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这里是一个完整的示例代码,可以帮助您更好地理解如何使用vuedraggable新增sku并进行拖拽添加商品属性: ```html <template> <div> <div class="sku-item" v-for="(sku, index) in skus" :key="sku.id"> <div class="sku-header"> SKU {{ index + 1 }} <button @click="removeSku(index)">删除</button> </div> <div class="sku-attributes"> <div class="attribute-item" v-for="(attribute, i) in sku.attributes" :key="attribute.id"> {{ attribute.name }} <span class="drag-handle" v-if="i !== 0" @mousedown="startDragging(sku, i)">☰</span> <button @click="removeAttribute(sku, i)">删除</button> </div> <div class="add-attribute" @click="addAttribute(sku)">添加属性</div> </div> </div> <div class="add-sku" @click="addSku">添加SKU</div> </div> </template> <script> import draggable from 'vuedraggable'; export default { components: { draggable, }, data() { return { skus: [ { id: 1, attributes: [ { id: 1, name: '颜色', value: '红色' }, { id: 2, name: '尺码', value: 'L' }, ], }, { id: 2, attributes: [ { id: 1, name: '颜色', value: '蓝色' }, { id: 2, name: '尺码', value: 'M' }, ], }, ], dragging: null, }; }, methods: { addSku() { const newSku = { id: this.skus.length + 1, attributes: [ { id: 1, name: '颜色', value: '' }, { id: 2, name: '尺码', value: '' }, ], }; this.skus.push(newSku); }, removeSku(index) { this.skus.splice(index, 1); }, addAttribute(sku) { const newAttribute = { id: sku.attributes.length + 1, name: '', value: '', }; sku.attributes.push(newAttribute); }, removeAttribute(sku, index) { sku.attributes.splice(index, 1); }, startDragging(sku, index) { this.dragging = { sku, index }; }, endDragging() { this.dragging = null; }, handleDrop(sku, attributeIndex) { if (this.dragging) { const { sku: sourceSku, index: sourceIndex } = this.dragging; const attribute = sourceSku.attributes.splice(sourceIndex, 1)[0]; sku.attributes.splice(attributeIndex, 0, attribute); } }, }, }; </script> <style> .sku-item { margin-bottom: 20px; border: 1px solid #ddd; } .sku-header { background-color: #f0f0f0; padding: 10px; display: flex; justify-content: space-between; align-items: center; } .sku-attributes { padding: 10px; } .attribute-item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .drag-handle { cursor: move; margin-right: 10px; } .add-attribute { cursor: pointer; color: blue; } .add-sku { cursor: pointer; color: blue; margin-top: 20px; } </style> ``` 在这个示例中,我们使用了vuedraggable来实现拖放操作。我们为每个sku元素添加了一个drag-handle类,以便指定可拖动的元素。我们还为每个sku元素中的每个属性元素添加了一个@mousedown事件,以便在拖动属性时设置dragging变量。在方法中,我们使用addSku方法来添加新的sku,使用removeSku方法来删除sku,使用addAttribute方法来添加属性,使用removeAttribute方法来删除属性,使用startDragging方法来在属性拖动时设置dragging变量,使用endDragging方法来在拖放操作完成后重置dragging变量,使用handleDrop方法来处理拖放操作的逻辑。我们还使用了CSS来美化页面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值