form表单-动态增减表单项

在官方文档Form表单组件中，有这么一个功能：动态增减表单项，它是长下面这样：

然而，你懂得，真正的项目需求UI设计图就不是那样的了，我目前做的项目的UI长这样：

其实，它们之间还是有很多相似的点的，基本的思路其实是可以参考官网的代码写法。
下面就是我在完整开发这个表单项时自己当时遇到的问题和解决思路，这里与大家分享。
首先贴出完整的实现代码：

<!-- 选项值 -->
  <el-scrollbar
    wrap-style="max-height: 200px;"
    :native="false"
    v-show="formData.type === 2"
  >
    <el-form-item
      v-show="formData.type === 2"
      v-for="(item,index) in formData.normalOption"
      :key="index"
      :label="(index === 0) ?'选项值':''"
      :prop="'normalOption.' + index + '.value'"
      :rules="{
      required:formData.type === 2,message:'选项值不能为空',trigger:'blur'
    }"
    >
      <el-col :span="formData.normalOption.length >1 ?22:24">
        <el-input v-model="item.value" placeholder="请填写"></el-input>
      </el-col>
      <el-col :span="2" class="line" v-show="formData.normalOption.length >1">
        <el-button type="text" @click.prevent="removeOptions(item)">
          <i class="el-icon-close"></i>
        </el-button>
      </el-col>
    </el-form-item>
    <el-form-item v-show="formData.type === 2">
      <el-button type="text" @click="addOptions">
        <i class="el-icon-plus"></i>
        添加选项
      </el-button>
    </el-form-item>
  </el-scrollbar>

问题：

1、怎么控制选项值三个字只在第一个显示，其他的form-item都不显示？

:label="(index === 0) ?'选项值':''"

2、怎么控制始终让它保持有一个选项输入框，即只有一个选项输入框时，不容许出现删除图标，并且输入框的长度要变长？

<el-col :span="formData.normalOption.length >1 ?22:24">
和
<el-col :span="2" class="line" v-show="formData.normalOption.length >1">

其实做到这里，基本第一版就已经出来了，下面是用到的methods方法：

// 添加选项
addOptions() {
  this.formData.normalOption.push({
    value:""
  })
},
// 移除选项
removeOptions(item) {
  let index = this.formData.normalOption.indexOf(item);
  if (index !== -1) {
    this.formData.normalOption.splice(index, 1);
  }
}, 

就这样，我测试完交给大佬看的时候，大佬提出了新的两个需求:
3、怎么控制点击添加选项按钮时，先判断之前的选项输入框是否都已经填写并且验证通过，只有通过验证后才能添加新的选项？
我的思路：当然就是在点击添加选项时，添加校验，只有校验通过后才能新增，代码如下：

addOptions() {
  // 添加之前先判断前面的是否都已录入
  this.$refs["formData"].validateField(
    `normalOption.${this.formData.normalOption.length - 1}.value`,
    errMsg => {
      if (errMsg != "") {
        return false;
      } else {
        this.formData.normalOption.push({
          value: ""
        });
      }
    }
  );
},

4、怎么控制选项值的选项的上下区域，加一个滚动条？
由于原生的滚动条太丑了，所以想到了elementUI的隐藏组件：el-scrollbar，然后给它一个最大高度，具体对于这个组件的一些属性需要去看看博客和源码，参考文章：
Element-UI 框架 el-scrollbar 组件

我的代码如下：

<el-scrollbar
    wrap-style="max-height: 200px;"
    :native="false"
    v-show="formData.type === 2"
  >
  //这是form-item 选项
</el-scrollbar>

下面来几张实现的效果图：

好了，这里就结束了！！！再会