el-select 不能重复选择,注意:删除后可以再次重新被选择
<el-form-item>
<el-select v-model="attribute.attributeSelect" @change="changeSelect()" placeholder="请选择属性分组" clearable>
<el-option
v-for="item in attributeList"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
></el-option>
</el-select>
</el-form-item>
<el-button class="el-button" type="text" @click="delAttribute({attribute: attribute, index: attIndex})">
<svg-icon
class="svg-icon"
name="shanchu"
:width="16"
:height="16"
type="primary"
/>
</el-button>
// 数据定义
data() {
return {
attributeList: [
{
label: 'qwe',
value: 'qwe'
},{
label: 'eee',
value: 'eee'
},{
label: 'ddd',
value: 'D'
},
],
// 属性分组
attributeGroupForm: [
// 单一
{
attributeSelect: '',
}
],
}
},
changeSelect() {
this.setDisable()
},
// 选项处理
setDisable(){
this.attributeList.forEach(item=> {
let isdisable = this.attributeGroupForm.findIndex((val) => val.attributeSelect ==item.value)
if(isdisable!=-1){
item.disabled = true
}else {
item.disabled = false
}
})
},
// 添加 分组
attributeGroupIndex() {
this.attributeGroupForm.push({
attributeSelect: '',
})
},