elementplus表单动态必填

HTML 部分

<template>
  <el-form :model="temp" :rules="formRules" ref="formRef">
    <el-form-item label="部门类型" prop="type">
      <el-select v-model="temp.type" class="filter-item" placeholder="请选择部门类型">
        <el-option
          v-for="item in processedOptions"
          :key="'type' + item.label"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled" />
      </el-select>
    </el-form-item>
    <el-form-item label="其他信息" prop="otherInfo">
      <el-input v-model="temp.otherInfo"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

JavaScript 部分

<script>
export default {
  data() {
    return {
      temp: {
        type: '',
        otherInfo: ''
      },
      formRules: {
        type: [{ required: true, message: '请选择部门类型', trigger: 'change' }],
        otherInfo: [{ required: false, message: '请输入其他信息', trigger: 'blur' }]
      }
    };
  },
  computed: {
    processedOptions() {
      const originalOptions = this.dictList('organization_type');
      return originalOptions.map(item => ({
        ...item,
        disabled: ['市场', '财务'].includes(item.value)
      }));
    }
  },
  methods: {
    dictList(type) {
      return [
        { label: '研发部', value: '研发' },
        { label: '市场部', value: '市场' },
        { label: '财务部', value: '财务' }
      ];
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('表单验证失败!');
          return false;
        }
      });
    },
    setOtherInfoRequired(required) {
      this.formRules.otherInfo = [{ required, message: '请输入其他信息', trigger: 'blur' }];
    }
  },
  watch: {
    'temp.type': function(newVal) {
      // 根据选择的部门类型动态设置 otherInfo 字段的必填状态
      if (newVal === '研发') {
        this.setOtherInfoRequired(true);
      } else {
        this.setOtherInfoRequired(false);
      }
    }
  }
};
</script>

解释
HTML 部分:
使用 el-form 组件来创建表单，并绑定 model 和 rules。
使用 el-form-item 组件来创建表单项，并指定 prop 属性以关联表单规则。
使用 el-select 和 el-option 组件来创建下拉选择框。
使用 el-button 组件来创建提交按钮，并绑定点击事件。
JavaScript 部分:
data 函数返回表单的数据模型 temp 和初始的表单规则 formRules。
computed 属性 processedOptions 处理原始的选项数据，并添加 disabled 属性。
dictList 方法模拟从服务器获取数据。
submitForm 方法用于提交表单并进行验证。
setOtherInfoRequired 方法用于动态设置 otherInfo 字段的必填状态。
watch 监听 temp.type 的变化，根据选择的部门类型动态设置 otherInfo 字段的必填状态。
通过这种方式，你可以根据用户的选择动态地控制表单字段的必填状态。