[前端问题解决]不要让数据限制你的思路

最近有这样一个需求，三种难度，每种三条规则

后端返回是这样一个数组（里面有9条数据）

probability: [{
        'difficulty': 1,
        'end': 5.0,
        'probability': 50,
        'start': 0.0
    }]

在受限于已有数据的情况下，思路很容易被限制
一般情况可能会想到直接v-for，把这个数据循环出来
但这样导致是一下子循环出来9条，但设计稿中，每个难度（3条一组）需要一个边框，直接处理样式是很麻烦的

因为是3个一组，就想到了双重循环
第一层是为了有个父级包裹
第二次就是为了渲染数据
大致结构

<div v-for="(items,indexs) in 3">
	<div v-for="(item,index) in 3">
	内容
	</div>
</div>

然后渲染是绑定数组的值
找一下规律
下标值是 (index + 3*indexs)
就比较轻松的解决了这个需求问题，避免了写复杂麻烦的样式，或是让后端调整数据结构

以下是例子，这个样式还是需要调整， 放出只是为了便于参考

<div v-for="(items,indexs) in 3" :key="indexs">
   <el-form-item
       v-for="(item,index) in 3"
       :key="index"
       style="margin-bottom: 0px;"
   >
       <el-form
           ref="formItem"
           :rules="formItemRules"
           :model="form.probability"
       >
           <el-form-item
               v-model="form.probability[index+3*indexs].id"
               :label="isRule(index)"
               style="margin-bottom: 0px; margin-left: 24px;"
               :required="true"
           >
               <el-form-item prop="start">
                   <el-input-number
                       v-model="form.probability[index+3*indexs].start"
                       :precision="1"
                       controls-position="right"
                       :min="1"
                       :step="0.1"
                       :max="10"
                       style="width: 100px;"
                   />
               </el-form-item>
               <span>—</span>
               <el-form-item prop="end">
                   <el-input-number
                       v-model="form.probability[index+3*indexs].end"
                       :precision="1"
                       controls-position="right"
                       :min="1"
                       :step="0.1"
                       :max="10"
                       style="width: 100px"
                   />
               </el-form-item>
               <el-form-item
                   label="概率："
                   style="margin-bottom: 0px; margin-left: 10px;"
                   prop="probability"
               >
                   <el-input-number
                       v-model="form.probability[index+3*indexs].probability"
                       controls-position="right"
                       :min="1"
                       :max="100"
                       style="width: 90px"
                   />
                   <span>%</span>
               </el-form-item>
           </el-form-item>
       </el-form>
   </el-form-item>
</div>

这个解决后看着很简单的问题，却是很容易犯的一种的问题，把自己的思路局限于数据格式
通过一些变通去解决问题，是很有意思的过程，这也就是我喜欢前端的原因之一吧