Avue填写一个字段后，其他字段变为必输字段或者变为下拉列表或不可输入

<template>
  <avue-form :option="formOption" v-model="formData" @change="handleChange"></avue-form>
</template>
 
<script>
export default {
  data() {
    return {
      formOption: {
        // 表单配置
        formItems: [
          {
            label: "字段A",
            prop: "fieldA",
            rules: [{ required: true, message: "请输入字段A的值", trigger: "blur" }]
          },
          {
            label: "字段B",
            prop: "fieldB",
            rules: [{ required: false, message: "请输入字段B的值", trigger: "blur" }]
          },
          {
            label: "字段C",
            prop: "fieldC",
            rules: [{ required: false, message: "请输入字段C的值", trigger: "blur" }]
          }
        ]
      },
      formData: {}
    };
  },
  methods: {
    handleChange(form, field, value) {
      if (field === "fieldA" && value) {
        // 当字段A有值时，字段B和字段C变为必输
        this.formOption.formItems.find(item => item.prop === "fieldB").rules = 
          [{ required: true, message: "请输入字段B的值", trigger: "blur" }];
        this.formOption.formItems.find(item => item.prop === "fieldC").rules = 
          [{ required: true, message: "请输入字段C的值", trigger: "blur" }];
      } else {
        // 当字段A的值消失时，恢复字段B和字段C的原始规则
        this.formOption.formItems.find(item => item.prop === "fieldB").rules = 
          [{ required: false, message: "请输入字段B的值", trigger: "blur" }];
        this.formOption.formItems.find(item => item.prop === "fieldC").rules = 
          [{ required: false, message: "请输入字段C的值", trigger: "blur" }];
      }
    }
  }
};
</script>

在Avue框架中，可以通过监听某个字段的值变化，然后动态修改其他字段的规则来实现这个需求。

注意：当改变一个字段属性时，需要在option中有对应属性初始化