&

<!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 = ['序號']
        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>

css選擇器的區(qū)別

毀與悔回答

指定詞匯!==指定值

怎么用react實現(xiàn)web端無縫輪播圖片

心上人回答

ant-desgin是我用過最好的react組件。
這里是咨詢的地方，不是你發(fā)牢騷的。你認(rèn)為不友好，可以不用它。而不是不會用，就說它不友好。
輪播組件可以參考一下走馬燈。
Carousel
當(dāng)然你也可使用這個組件的基礎(chǔ)組件react-slick

echart 雷達(dá)圖容器邊距

夏夕回答

可以修改
radar.center
radar.radius
來修改邊距

vue vant-ui 商品詳情頁tab切換內(nèi)容

任她鬧回答

可以直接寫啊,可以不用for.

<van-tabs :active="active">
      <van-tab>
        <div slot="title">商品</div>
        <div>商品情況</div>
      </van-tab>
      <van-tab>
        <div slot="title">詳情</div>
        <div>詳情內(nèi)容</div>
      </van-tab>
      <van-tab>
        <div slot="title">評論</div>
        <div>評論內(nèi)容</div>
      </van-tab>
    </van-tabs>

  export default {
  data () {
    return {
      active: 1
    }
  }
}

react后臺管理系統(tǒng)websocket實現(xiàn)實時狀態(tài)更新

默念回答

1.你需要一個socket的庫，比如說socket.io-client
2.把庫引入組件后，在constructor里

 this.socket = io.connect(server的地址);

3.在componentDidMount里給socket綁定上事件，比如

socket.on(事件的key, (msg) => {
    //msg是后臺返回的數(shù)據(jù)，具體看你們后臺返回的拿到數(shù)據(jù)后就可以操作了，改變state或者redux
});

4.最好在componentWillUnmount里

this.socket.close();

因為我后端用的是socket.io，所以我用socket.io-client，這兩個有沒有匹配關(guān)系我就不知道了，大致的思路是這樣的

vue路由控制問題，有償

傻丟丟回答

唔，我刷到了你上一個問題，看到你的評論才知道你在問啥，哈哈哈嗝
你的需求是后端控制用戶只能看到自己有權(quán)限的功能模塊的路由顯示，也就是說，這跟后端控制路由這個命題沒啥關(guān)系，他只是給你提供了當(dāng)前用戶的權(quán)限數(shù)據(jù)，而你，依舊是路由模塊的boss。
請求到了后端的權(quán)限數(shù)據(jù)后，進(jìn)行存儲，格式類似于[{key:"可見模塊",state:true}，{key:"可見模塊1",state:true}，{key:"不可見模塊",state:false}];如果你是用的router-link標(biāo)簽，那么就利用數(shù)據(jù)，給他v-if，沒有權(quán)限的不渲染,入口就沒了，如果你用的方法this.$router.push("/xx"),那么就利用數(shù)據(jù)做判定，是否能夠跳轉(zhuǎn)。當(dāng)然，為了安全0 - 0你后端的接口要做權(quán)鑒，沒有權(quán)限的用戶，即使更改hash，跳轉(zhuǎn)進(jìn)去也是沒有數(shù)據(jù)的，唔，還可以對這種情況寫個彩蛋，給他個alert啥的，哈哈哈嗝，所以說0 - 0沒你想的那么麻煩

js數(shù)組對象的清洗組合操作

話寡回答

不知道是不是這個意思，沒有對arclist進(jìn)行處理，如果需要的話，可以對node執(zhí)行一下recursion

function sortStart(arr) {
  var origin = arr
  var result = []
  var start =origin.filter(item => item.source.component === 'start')[0]
  result.push(start.source)
  recursion(origin, start, result)
  return result
}
function recursion(origin, start, result) {
  if (start.source.component === 'end') {
      result.push(start.source)
      return result
  }
  start = origin.filter(item => start.target.id === item.source.id)[0]
  result.push(start.source)
  if (start.target.component === 'end') {
    result.push(start.target)
    return result
  } else {
    recursion(origin, start, result)
  }
}

[ { id: 'sd123', component: 'start' },
  { id: 'sd1a3', component: 'ordinary' },
  { id: 'sdbf3', component: 'ordinary' },
  { id: 'sd3bn', component: 'block' },
  { id: 'er12a', component: 'ordinary' },
  { id: 'sdop3', component: 'end' } ]