element-ui自定义组件表单校验结果不更新怎么办？

Question

表单校验问题（第一次如果校验不通过的话，修改表单项内容再次提交，校验结果仍然是第一次的校验结果）
其中一些表单项是自定义的组件

尝试打印form表单提交成功时，表单项为undefined

<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改/工作流审核调用) -->
    <el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="95px">

        <el-col :span="12">
          <el-form-item label="线路" prop="flineId">
            <base-line-select :deptid="form.fdeptId" :v-model="form.flineId" @change="setLine"
                              :key="setLineKey"></base-line-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="速度等级" prop="fspeedLevel">
            <el-select v-model="form.fspeedLevel" placeholder="请选择速度等级" clearable size="small">
              <el-option v-for="dict in this.getDictDatas(DICT_TYPE.BASE_LINE_SPEED_LEVEL)"
                         :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始车站" prop="fstationStartId">
            <StationAllSelect  :v-model="form.fstationStartId"
                               @change="setFstationStart"
                               :key="setStationKey"></StationAllSelect>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="终点车站" prop="fstationEndId">
            <StationAllSelect  :v-model="form.fstationEndId"
                               @change="setFstationEnd"
                               :key="setStationKey"></StationAllSelect>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="区间名称" prop="fstationName">
            <el-input v-model="form.fstationName"  type="text" @input="changeMessage($event)"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="归属车站" prop="fstationoId">
            <StationAllSelect  :v-model="form.fstationoId"
                               @change="setFstationo"
                               :key="setStationKey"></StationAllSelect>
          </el-form-item>
        </el-col>


         <!-- <el-form-item label="活动区域" prop="region">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item> -->



      </el-form>
    </el-row>
    <div slot="footer" class="dialog-footer text-center">
      <el-button v-if="isEdit"  type="primary" @click="submitForm">确 定</el-button>
      <el-button v-if="isEdit"  @click="cancel">取 消</el-button>
    </div>
  </div>
</template>
import BaseLineSelect from "@/components/BaseLineSelect/index.vue";
import StationAllSelect from "@/views/device/StationAllSelect/index.vue";
export default {
  name: "Qj",
  components: {
    StationAllSelect, BaseLineSelect,BaseDeptSelectTree
  },
  props: {
    id: {
      type: [String, Number],
      default: undefined
    },
  },
  data() {
    return {
      deptLevel:'3',
      deptkey:'',
      setStationKey: '',
      setLineKey: '',
      // 弹出层标题
      title: "",
      disabled:true,  //控件是否可编辑
      isEdit:false,
      bizId: '',

      // 表单参数
      // form: {},
      form: {},
      // 表单校验
      rules: {
        // region: [
        //     { required: true, message: '请选择活动区域', trigger: 'change' }
        //   ],

        flineId: [
          {required: true, message: "线路不能为空", trigger: ["blur","change"]}],
        fstationStartId: [
          {required: true, message: "区间开始车站不能为空", trigger: ["blur","change"]}],
       
        fstationEndId: [
          {required: true, message: "区间终点车站不能为空", trigger: ["blur","change"]}],
       
        fstationName: [
          {required: true, message: "区间名称不能为空", trigger: "blur"}],
        fstationoId: [
          {required: true, message: "归属车站不能为空", trigger:["blur","change"]}],
      },
      stationArr: [],
    };
  },
  created() {
    this.bizId = this.id || this.$route.query.id;
    this.form.fzorq = 'QJ';
    if (this.bizId) {
      this.getDetail();
    }
  },
  mounted() {
    this.getStationList()
  },
  methods: {
    /** 修改归属车站的回调 */
    changeStationHandler(id, name) {
      this.form.fstationoId = id
      this.form.fstationoName = name
    },
    /** 获取所有车站数据 */
    async getStationList() {
      let {data} = await getStationListAll()
      this.stationArr = data
    },
    setFstationStart(val, name) {
      this.form.fstationStartId = val;
      this.form.fstationStartName = name;
      this.setFstationName();
      this.setFstationo(val,name);
      this.setStationKey = Date.now();
    },
    setFstationEnd(val, name) {
      this.form.fstationEndId = val;
      this.form.fstationEndName = name;
      this.setFstationName();
      this.setStationKey = Date.now();
    },
    setFstationName(){
      if(this.form.fstationStartId!=undefined&&this.form.fstationEndId!=undefined){
        console.log(this.form.fstationStartName+'~'+this.form.fstationEndName);
        this.form.fzorq='QJ';
        this.form.fstationId=this.form.fstationStartId+'~'+this.form.fstationEndId;
        this.form.fstationName=this.form.fstationStartName+'~'+this.form.fstationEndName;
        this.$forceUpdate();
      }
    },
    changeMessage() {

      this.$forceUpdate()
    },
    setFstationo(val, name) {
      this.form.fstationoId = val;
      this.form.fstationoName = name;
    },
    setLine(val, name) {
      this.form.flineId = val;
      this.form.flineName = name;
      this.setLineKey = Date.now();
    },
    setDept(val){
      this.form.fdeptId = val[0].id;          //刷新组件条件
      this.form.fedptName = val[0].name;          //刷新组件条件
    },
    pushDialogFormData(dialogFormData) {

      this.deptkey =  Date.now();
      this.setLineKey = Date.now();
      this.setStationKey = Date.now();
      this.isEdit=dialogFormData.isEdit;  //表单编辑状态
      this.disabled = !dialogFormData.isEdit
      this.form = dialogFormData.form;
    },
    /** 取消按钮 */
    cancel() {
      this.$emit('editOk');
      this.$refs['form'].resetFields();
    },
    jy(){
      this.$refs['form'].resetFields();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        updaterTime: undefined,
        fdeptId: undefined,
        fzorq: 'QJ',
        fspeedLevel: undefined,
        flineId: undefined,
        flineName: undefined,
        fstationId: undefined,
        fstationName: undefined,
        fedptName: undefined,
        fstationStartId: undefined,
        fstationStartName: undefined,
        fstationEndId: undefined,
        fstationEndName: undefined,
        fstationoId:undefined,
        fstationoName:undefined,
      };
      this.resetForm("form");
    },
    /** 查看详细信息 */
    getDetail(row) {
      this.reset();
      const id = this.bizId;
      getQj(id).then(response => {
        this.form = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          console.log("falsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalsefalse");
          console.log(this.form);
          return;
        }
        {
          console.log("truetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetruetrue");
          console.log(this.form.flineId);
          console.log(this.form.fstationStartId);
          console.log(this.form.fstationEndId);
          console.log(this.form.fstationName);
          console.log(this.form.fstationoId);

          console.log(this.form);
          // console.log(JSON.stringify(this.form));

        };
        // 修改的提交
        if (this.form.id != null) {
          updateQj(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.$emit('editOk')
          });
          return;
        }
        // 添加的提交

        createQj(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.$emit('editOk')
        });
      });
    }
  }
};
</script>

Answer 1

帮你代码改了下

<template>
  <div class="app-container">
    <el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="95px">
        <el-col :span="12">
          <el-form-item label="线路" prop="flineId">
            <base-line-select 
              v-model="form.flineId"
              :deptid="form.fdeptId"
              @change="setLine"
              :key="setLineKey"
            />
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item label="速度等级" prop="fspeedLevel">
            <el-select 
              v-model="form.fspeedLevel"
              placeholder="请选择速度等级"
              clearable 
              size="small"
            >
              <el-option
                v-for="dict in getDictDatas(DICT_TYPE.BASE_LINE_SPEED_LEVEL)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="开始车站" prop="fstationStartId">
            <station-all-select
              v-model="form.fstationStartId"
              @change="setFstationStart"
              :key="setStationKey"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="终点车站" prop="fstationEndId">
            <station-all-select
              v-model="form.fstationEndId"
              @change="setFstationEnd"
              :key="setStationKey"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="区间名称" prop="fstationName">
            <el-input 
              v-model="form.fstationName"
              :disabled="true"
              type="text"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="归属车站" prop="fstationoId">
            <station-all-select
              v-model="form.fstationoId"
              @change="setFstationo"
              :key="setStationKey"
            />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <div slot="footer" class="dialog-footer text-center">
      <el-button v-if="isEdit" type="primary" @click="submitForm">确 定</el-button>
      <el-button v-if="isEdit" @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import BaseLineSelect from "@/components/BaseLineSelect/index.vue";
import StationAllSelect from "@/views/device/StationAllSelect/index.vue";
import { getQj, createQj, updateQj } from '@/api/qj'; // 假设这些API已存在
import { getStationListAll } from '@/api/station'; // 假设这是获取站点列表的API

export default {
  name: "Qj",
  components: {
    StationAllSelect,
    BaseLineSelect
  },
  props: {
    id: {
      type: [String, Number],
      default: undefined
    },
  },
  data() {
    return {
      deptLevel: '3',
      deptkey: '',
      setStationKey: '',
      setLineKey: '',
      title: "",
      disabled: true,
      isEdit: false,
      bizId: '',
      form: {
        id: undefined,
        updaterTime: undefined,
        fdeptId: undefined,
        fzorq: 'QJ',
        fspeedLevel: undefined,
        flineId: undefined,
        flineName: undefined,
        fstationId: undefined,
        fstationName: undefined,
        fedptName: undefined,
        fstationStartId: undefined,
        fstationStartName: undefined,
        fstationEndId: undefined,
        fstationEndName: undefined,
        fstationoId: undefined,
        fstationoName: undefined,
      },
      rules: {
        flineId: [
          { required: true, message: "线路不能为空", trigger: ["blur", "change"] }
        ],
        fstationStartId: [
          { required: true, message: "区间开始车站不能为空", trigger: ["blur", "change"] }
        ],
        fstationEndId: [
          { required: true, message: "区间终点车站不能为空", trigger: ["blur", "change"] }
        ],
        fstationName: [
          { required: true, message: "区间名称不能为空", trigger: "blur" }
        ],
        fstationoId: [
          { required: true, message: "归属车站不能为空", trigger: ["blur", "change"] }
        ],
      },
      stationArr: [],
    };
  },
  created() {
    this.bizId = this.id || this.$route.query.id;
    if (this.bizId) {
      this.getDetail();
    }
  },
  mounted() {
    this.getStationList();
  },
  methods: {
    async getStationList() {
      try {
        const { data } = await getStationListAll();
        this.stationArr = data;
      } catch (error) {
        console.error('获取站点列表失败:', error);
        this.$message.error('获取站点列表失败');
      }
    },
    setFstationStart(val, name) {
      this.form.fstationStartId = val;
      this.form.fstationStartName = name;
      this.setFstationName();
      this.setFstationo(val, name);
      this.setStationKey = Date.now();
    },
    setFstationEnd(val, name) {
      this.form.fstationEndId = val;
      this.form.fstationEndName = name;
      this.setFstationName();
      this.setStationKey = Date.now();
    },
    setFstationName() {
      if (this.form.fstationStartId && this.form.fstationEndId) {
        this.form.fstationId = `${this.form.fstationStartId}~${this.form.fstationEndId}`;
        this.form.fstationName = `${this.form.fstationStartName}~${this.form.fstationEndName}`;
      }
    },
    setFstationo(val, name) {
      this.form.fstationoId = val;
      this.form.fstationoName = name;
    },
    setLine(val, name) {
      this.form.flineId = val;
      this.form.flineName = name;
      this.setLineKey = Date.now();
    },
    setDept(val) {
      if (val && val[0]) {
        this.form.fdeptId = val[0].id;
        this.form.fedptName = val[0].name;
      }
    },
    pushDialogFormData(dialogFormData) {
      this.deptkey = Date.now();
      this.setLineKey = Date.now();
      this.setStationKey = Date.now();
      this.isEdit = dialogFormData.isEdit;
      this.disabled = !dialogFormData.isEdit;
      this.form = { ...this.form, ...dialogFormData.form };
    },
    cancel() {
      this.$emit('editOk');
      this.$refs.form.resetFields();
    },
    reset() {
      this.$refs.form.resetFields();
      Object.assign(this.form, {
        id: undefined,
        updaterTime: undefined,
        fdeptId: undefined,
        fzorq: 'QJ',
        fspeedLevel: undefined,
        flineId: undefined,
        flineName: undefined,
        fstationId: undefined,
        fstationName: undefined,
        fedptName: undefined,
        fstationStartId: undefined,
        fstationStartName: undefined,
        fstationEndId: undefined,
        fstationEndName: undefined,
        fstationoId: undefined,
        fstationoName: undefined,
      });
    },
    async getDetail() {
      try {
        const response = await getQj(this.bizId);
        this.form = response.data;
      } catch (error) {
        console.error('获取详情失败:', error);
        this.$message.error('获取详情失败');
      }
    },
    submitForm() {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return;
        }
        
        try {
          if (this.form.id) {
            await updateQj(this.form);
            this.$modal.msgSuccess("修改成功");
          } else {
            await createQj(this.form);
            this.$modal.msgSuccess("新增成功");
          }
          this.$emit('editOk');
        } catch (error) {
          console.error('提交失败:', error);
          this.$message.error('提交失败');
        }
      });
    }
  }
};
</script>