Creation of Multi-attributes of Project Commodity in js background Management system

            <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>
            
            

clipboard.png

clipboard.png

Jan.11,2022

I don't know what to say


recall and write some to see if you can understand it. https://jsfiddle.net/djyuning.

=

I have written one of these things before, and I need to use the reduce () method, which is a bit of a mouthful to write, and I think it can be regarded as a high-level operation! Finally, you can achieve a horizontal pyramid effect! It is suggested that the landlord should study the algorithm of cell row merging.


vue bidirectional data binding requires specific attributes to exist before you can listen for changes, so you need to declare attributes for different data before binding to implement listening on input. It depends on what your data structure looks like, such as

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; iPP){
         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>
< H2 > add: < / H2 >

you can generate data according to your choice, for example:

// 
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 )
    })
})

this is happening now

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4bed4-43b2e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4bed4-43b2e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?