效果图
处理逻辑是每一行都有加减，不过只有一行的时候执行的是清空策略，多行的时候执行的是删除策略。已经选择过的会禁用。
.vue文件
<el-row
v-for="(op, index) in abilityRule"
:key="index"
>
<el-col :span="9">
<el-select
v-model="op.ability"
@focus="checkOptions()"
@change="checkOptions()"
placeholder="选择规则"
>
<el-option
v-for="item in abilityRuleChange"
: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({ ability: '', expired_at: '' })
},
//减号
subList(type, index, id) {
if (type == 1) {
this.abilityRule.splice(index, 1)
} else {//清空
this.abilityRule = [{ ability: '', 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()?
