organizeLevelList 为2,1禁用,,为3时,1,2禁用,为4时1,2,3禁用 怎么实现,具体代码
时间: 2024-03-26 21:39:50 浏览: 14
你可以在computed属性中添加一个方法,判断当前organizeLevelList的值,然后返回一个对象,对象的属性名为1,2,3,属性值为true或false,表示对应的el-radio是否禁用。然后在el-radio组件上绑定这些属性。
下面是具体示例代码:
```
<template>
<el-dialog :title="dialogTitle" :visible.sync="addOrEditDialogVisible" width="30%" center @close="oncancel">
<el-form :rules="dialogRule" ref="dialogFormRef" :model="dialogForm">
<el-form-item label="组织名称" prop="organizeName">
<el-input v-model="dialogForm.organizeName"></el-input>
</el-form-item>
<el-form-item label="层级标签" prop="organizeLevelList">
<el-radio-group v-model="dialogForm.organizeLevelList" size="mini">
<el-radio v-for="i in organizeLevelList" :key="i.levelId" :label="i.levelId"
:disabled="disabledRadio[i.levelId]"
@change="handleRadio" border>
{{ i.levelName }}
</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span class="dialog-footer">
<el-button type="primary" @click="handleMakeSure" size="mini">提交</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
organizeLevelList: 2,
dialogForm: {
organizeLevelList: 1
},
disabledRadio: {}
}
},
computed: {
dialogTitle() {
return this.dialogForm.id ? '编辑组织' : '新增组织'
}
},
watch: {
organizeLevelList() {
this.updateDisabledRadio()
}
},
methods: {
handleRadio(value) {
console.log(value)
},
handleMakeSure() {
console.log(this.dialogForm)
},
updateDisabledRadio() {
const disabledRadio = {}
if (this.organizeLevelList === 2) {
disabledRadio[1] = true
} else if (this.organizeLevelList === 3) {
disabledRadio[1] = true
disabledRadio[2] = true
} else if (this.organizeLevelList === 4) {
disabledRadio[1] = true
disabledRadio[2] = true
disabledRadio[3] = true
}
this.disabledRadio = disabledRadio
}
},
mounted() {
this.updateDisabledRadio()
}
}
</script>
```
在这个代码中,我们在data属性中添加了一个disabledRadio对象,用来存储每个el-radio是否禁用。在updateDisabledRadio方法中,我们根据organizeLevelList的值来更新disabledRadio对象,然后在el-radio组件上绑定这些属性。
当organizeLevelList的值改变时,我们会调用updateDisabledRadio方法来更新disabledRadio对象,然后将它存储在data属性中。在mounted钩子中,我们调用了一次updateDisabledRadio方法,来初始化disabledRadio对象。
现在,当organizeLevelList的值为2时,1的el-radio将被禁用;当organizeLevelList的值为3时,1和2的el-radio将被禁用;当organizeLevelList的值为4时,1,2和3的el-radio将被禁用。