js 后台管理系统项目 商品多属性的创建

Question

            <table class="g-tableList com_pro_list">
              <thead>
                <tr>
                  <th v-for="(item,index) in retRockeval" :key="index">
                    <span>{{item}}</span>
                  </th>
                  <th>专柜价</th>
                  <th>市场售价</th>
                  <th>成本价</th>
                  <th>批发价</th>
                  <th>库存</th>
                </tr>
              </thead>
              <tbody>
                <tr class="sku_value">
                  <td v-for="(item,index) in retRockezhi" :key="index">
                    <span>{{item}}</span>
                  </td>
                  <td>
                    <input name class="g-input" type="text" value>
                  </td>
                  <td>
                    <input name class="g-input" type="text" value>
                  </td>
                  <td>
                    <input name class="g-input" type="text" value>
                  </td>
                  <td>
                    <input name class="g-input" type="text" value>
                  </td>
                  <td>
                    <input name class="g-input" type="text" value>
                  </td>
                </tr>
              </tbody>
            </table>
            
            

求帮忙解答创建商品的多级属性，怎么叠加，怎么实现下面这种效果

Answer 1

回忆着写了一些，看看能理解不？ https://jsfiddle.net/djyuning...

=================================

以前写过一个这个东西，需要用到 reduce() 方法，写起来还是比较拗口的，个人认为都可以算是高阶操作了！最终可实现一个横向的金字塔效果！建议楼主去弄个单元格 row 合并的算法研究一下。

Answer 2

没懂要表达什么

Answer 3

vue双向数据绑定需要具体属性存在，才能去监听改变，所以你需要先为不同的数据声明属性，才能绑定在input上实现监听。具体的要看你数据结构是什么样的，比如

let data = [{color:'红色',size:'XXXL'},{color:'红色',size:'XXL'},...]

//为每一项数据声明属性
//因为属性较多，所以先声明一个数组，保存所有的属性名(也可以直接用下标存属性)
let props = ['zg', 'sc', 'cb', 'pf', 'kc']
data.forEach(item=>{
    props.forEach(prop=>{
        item[ prop ] = ''
    })
    /* 下标存props
     for(let i = 0; i < 5; i++){
         item[ '_prop' + i ] = ''
     }
    */
})

//html
<tr class="sku_value" v-for="(item,index) in data" :key="index">
    <td>{{item.color}}<td>
    <td>{{item.size}}<td>
    <td v-for="(prop,pindex) in props" :key="pindex">
        <input name class="g-input" type="text" v-model="item[ prop ]" /*@change='' @input=''*/>
    <td>
    <!-- 下标
    <td v-for="cindex in 5" :key="cindex">
        <input name class="g-input" type="text" v-model="item[ '_prop' + (cindex-1) ]" /*@change='' @input=''*/>
    <td>
    -->
</tr>

补充：

可以根据你的选择来生成数据，比如：

//选择的颜色为 
let colors = ['红色'， '蓝色']
//选择的型号为 
let sizes = ['XXL'， 'XL']

//那么data
let data = [];
let props = ['zg', 'sc', 'cb', 'pf', 'kc']
colors.forEach((color,cindex)=>{
    sizes.forEach((size,sindex)=>{
        let item = {
            color,
            size
        }
        props.forEach(prop=>{
            item[ prop ] = ''
        })
        data.push(item )
    })
})

Answer 4

现在出现这样的情况