Vue3中动态绑定:disabled element-plus使用方法
Vue3中动态绑定:disabledelement-plus使用方法
·
@change="whetherFlag($event)" 根据value值判断是否禁用 :disabled="isShow"
<el-dialog v-model="dialogVisble" title="报警处理" width="30%">
<el-form :model="parentValue" label-width="120px">
<el-form-item label="是否误报" prop="status">
<el-select v-model="parentValue.status" placeholder="请选择报警状态" @change="whetherFlag($event)">
<el-option label="是" value="1" />
<el-option label="否" value="2" />
</el-select>
</el-form-item>
<el-form-item label="车牌号">
<el-input v-model="parentValue.carNumber" />
</el-form-item>
<el-form-item label="司机姓名">
<el-input v-model="parentValue.name" />
</el-form-item>
<el-form-item label="应拉煤种" prop="strainCoal">
<el-select v-model="parentValue.strainCoal" :disabled="isShow" placeholder="请选择应拉煤种"><el-option v-for="item in strainList"
:key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="所拉煤种" prop="pulledCoal">
<el-select v-model="parentValue.pulledCoal" :disabled="isShow" placeholder="请选择所拉煤种"><el-option v-for="item in pulledList"
:key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="报警原因" prop="cause">
<el-select v-model="parentValue.cause" :disabled="isShow" placeholder="报警原因"><el-option v-for="item in policeList"
:key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<span class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="confirm"> 确 定 </el-button>
</span>
</el-form-item>
</el-form>
</el-dialog>
初始值为禁用状态
const isShow = ref<boolean>(true);
const isShow = ref<boolean>(true);
根据value的值判断是否禁用
// 状态判断
const whetherFlag = (value: string) => {
if( value === "1" ) {
isShow.value = false;
console.log( isShow.value," isShow.value");
}else {
isShow.value = true;
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)