最近有这样一个需求,三种难度,每种三条规则
后端返回是这样一个数组(里面有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>
这个解决后看着很简单的问题,却是很容易犯的一种的问题,把自己的思路局限于数据格式
通过一些变通去解决问题,是很有意思的过程,这也就是我喜欢前端的原因之一吧