Vue3中动态绑定:disabled element-plus使用方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3中动态绑定:disabled element-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;
  }
}

文章来源地址https://www.toymoban.com/news/detail-823930.html

到了这里，关于Vue3中动态绑定:disabled element-plus使用方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！