vue+element表单通过disabled属性动态改变rules属性

最新推荐文章于 2024-07-15 14:53:54 发布

原创最新推荐文章于 2024-07-15 14:53:54 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

杂记专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种基于Vue.js的表单设计，该表单用于选择维护类别并根据所选类别动态启用或禁用维护周期输入。当选择特定维护类别时，会触发验证规则来确保维护周期字段的有效性。

<el-form-item label="维护类别" prop="maintenanceCategories">
  <el-select
    v-model="form.maintenanceCategories"
    placeholder="请选择维护类别"
    @change="changeHandler"
  >
    <el-option
      v-for="dict in dict.type.maintenance_categories"
      :key="dict.value"
      :label="dict.label"
      :value="dict.value"
    ></el-option>
  </el-select>
</el-form-item>
<el-form-item label="维护周期" prop="calibrationCycle">
  <el-input
    v-model="form.calibrationCycle"
    placeholder="请输入维护周期"
    :disabled="
      form.maintenanceCategories === undefined ||
      form.maintenanceCategories === '1'
    "
  />
</el-form-item>
export default {
  data() {
    return {
      form: {},
      // 表单校验
      rules: {
        calibrationCycle: [],
      },
    };
  },
  methods: {
    changeHandler(value) {
      if (value === "0") {
        this.rules.calibrationCycle.push({
          required: true,
          message: "维护周期不能为空",
        });
      } else {
        this.rules.calibrationCycle.pop();
      }
    },
  }
}