element-ui 点击增加/减少一行

效果图

处理逻辑是每一行都有加减，不过只有一行的时候执行的是清空策略，多行的时候执行的是删除策略。已经选择过的会禁用。

.vue文件

<el-row
          v-for="(op, index) in abilityRule"
          :key="index"
        >
          <el-col :span="9">
            <el-select
              v-model="op.parms1"
              @focus="checkOptions()"
              @change="checkOptions()"
              placeholder="选择规则"
            >
              <el-option
                v-for="item in RuleChange"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-date-picker
              v-model="op.expired_at"
              type="datetime"
              placeholder="选择解封日期"
            ></el-date-picker>
          </el-col>
          <el-col :span="3" :offset="1">
            <i
              class="el-icon-circle-plus-outline"
              @click="addList()"
            ></i>
            <i
              v-if="abilityRule.length > 1"
              class="el-icon-remove-outline"
              @click="subList(1, index, op.ability)"
            ></i>
            <i
              v-else
              class="el-icon-remove-outline"
              @click="subList(2, index, op.ability)"
            ></i>
          </el-col>
        </el-row>

.js文件内容

//增加一行
addList() {
     this.abilityRule.push({ parms1: '', expired_at: '' })
},
//减号
subList(type, index, id) {
    if (type == 1) {
      this.abilityRule.splice(index, 1)
    } else {//清空
      this.abilityRule = [{ parms1: '', expired_at: '' }]
    }
    this.abilityRuleChange.forEach(v => {
    if (v.value === id && v.disabled) {
       v.disabled = false
     }
   })
},
//禁用已经选择过的    
checkOptions() {
      this.abilityRuleChange.forEach(v => {
        v.disabled = false
        for (var i = 0; i < this.abilityRule.length; i++) {
          if (this.abilityRule[i].ability === v.value) {
            v.disabled = true
          }
        }
      })
      this.$forceUpdate()//强制刷新组件
    },

踩的坑：

checkOptions事件已经返回disabled为禁用状态，el-select组件没有反应。在事件末尾加强制刷新组件    

this.$forceUpdate()