js 數(shù)據(jù)操作問題

問題描述

用戶選擇了三個(gè)數(shù)組如下

let colorOptions = ['紅色','黃色']
let sizeOptions = [36,37,38,39,40,41]
let otherSizeOptions = ['A','B','C','D']

我想要如下結(jié)果
圖片描述

現(xiàn)在這個(gè)問題還沒有解決出來(lái)，希望大佬們同學(xué)們幫忙解答一下，非常感謝，如果附有解題思路更好，我數(shù)據(jù)操作這塊好弱，也是一直在學(xué)習(xí)。謝謝

回答

編輯回答

墨染殤

用vue寫了一個(gè)demo，能運(yùn)行的，樣式自己調(diào)整吧

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="container">
  <table>
    <tr>
      <td v-for="name in keysNames">{{name}}</td>
      <td v-for="prop in props">{{prop}}</td>
    </tr>
    <tr v-for="(item, itemIndex) in list" :key="itemIndex">
      <td v-for="key in keys">{{item[key]}}</td>
      <td v-for="(prop, propIndex) in item.props" :key="propIndex" @click="toggleItem(itemIndex, propIndex)">{{prop}}</td>
    </tr>
  </table>
</div>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
  <script type="text/javascript">
  var app = new Vue({
    el:"#container",
    data:{
      keys: [],
      props: [],
      list: [],
      keysNames: []
    },
    created() {
      this.foo(['紅色','黃色'],[36,37,38,39,40,41],['A','B','C','D'])
    },
    methods:{
      foo: function(colorOptions, sizeOptions, otherSizeOptions){
        let keys = ['order']
        let keysNames = ['序號(hào)']
        let list = []
        let hasOtherSize = false
        let order = 1
        if(colorOptions == null || colorOptions.length === 0){
          console.error('colorOptions is empty')
          return
        }

        if(sizeOptions == null || sizeOptions.length === 0){
          console.error('otherSizeOptions is empty')
          return
        }
        this.props = sizeOptions;

        keys.push('color')
        keysNames.push('顏色')
        
        if(otherSizeOptions != null && otherSizeOptions.length > 0){
          hasOtherSize = true
          keys.push('otherSize')
          keysNames.push('其他顏色')
        }

        colorOptions.forEach(color => {
          console.log('1111')
          if(hasOtherSize){
            otherSizeOptions.forEach(otherSize => {
              let obj = {}
              obj.color = color
              obj.otherSize = otherSize
              obj.props = new Array(sizeOptions.length).fill(true)
              obj.order = order
              order ++
              list.push(obj)
            })
          } else {
            let obj = {}
            obj.color = color
            obj.props = new Array(sizeOptions.length).fill(true)
            obj.order = order
            order ++
            list.push(obj)
          }
        })

        console.log(list)
        this.keys = keys;
        this.keysNames = keysNames
        this.list = list
      },
      toggleItem(itemIndex, propIndex){
        let list = this.list
        list[itemIndex].props[propIndex] = !list[itemIndex].props[propIndex] 
        this.$set(this.list[itemIndex].props, list[itemIndex].props,true )
      }
    }
  })
  </script>
</body>
</html>

2017年3月24日 17:31

編輯回答