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

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

Previous: About the problem of reactjs warning with an endless loop

Next: Why can you get process.env, using node in cmd but not process.env content in node in vue development?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu