前端遇到的问题总结

1. span设置为区块

span不会占用一行，内容占多大宽度，span就有多宽。

而div是一个区块，可以设置width，height

如果想让span也变成一个区块，可以在设置样式时加上属性display: block;

 

2. 设置背景色为透明色

background-color: rgba(255, 255, 255, 0.6);

 

3. for循环中<a-form-model-item>必填字段的校验

注意：a-form-model-item中的内容，prod的设置

:prop="'diff_scene_input_info.' + index + '.data.wait_time'"

:rules="rules.checkWaitTime"

<div
              style="margin-top:15px"
              v-for="(input_info, index) in scene_info.diff_scene_input_info"
              :key="index"
            >
              <span class="ant-span">{{ input_info.name }}</span>
              <a-form-model-item
                :prop="'diff_scene_input_info.' + index + '.data.wait_time'"
                :rules="rules.checkWaitTime"
              >
                <span slot="label">
                  入流等待时间&nbsp;
                  <a-tooltip title="该批数据发送需等待时间">
                    <a-icon type="question-circle-o" />
                  </a-tooltip>
                </span>
                <a-input-number
                  id="inputNumber"
                  style="width:150px"
                  v-model="input_info.data.wait_time"
                  :min="0"
                  :max="100"
                />
              </a-form-model-item>
</div>

4. 在用a-form-model-item时，需要对label特殊处理的

<a-form-model-item>
          <span slot="label">
            标题&nbsp;
            <a-tooltip title="标题的解释">
              <a-icon type="question-circle-o" />
            </a-tooltip>
          </span>
</a-form-model-item>

5. vue使用v-for时获取列表的前n个元素，中间范围元素，末尾元素

中间元素：v-for="(item,index) in items.slice(6,13)" [6,13)

获取最后6条:(item,index) in items.slice(items.length-6,items.length)

获取前6条：v-for="(item,index) in items.slice(0,6)"   或者 v-for="(item,index) in items" v-if="index < 6"