vue下拉框切换,关联el-input改变值,不要立即触发输入框的必填校验

在Vue.js中，如果你想创建一个下拉框联动`el-input`，即当下拉框选择项改变时，对应的输入框值也随之更新，并延后必填验证的触发，可以这样做：

1. 首先，在模板中，使用v-model绑定下拉框的选择值到一个数据属性上，例如`selectedValue`。同时，将`input`字段绑定到另一个数据属性，如`inputValue`，默认设置为初始的下拉框选项。

<template>
  <el-select v-model="selectedValue" @change="handleChange">
    <!-- 下拉框选项 -->
  </el-select>
  <el-input v-model="inputValue" :disabled="!isFilled"></el-input>
</template>

2. 定义`handleChange`方法，处理下拉框变化事件。在这个方法里，获取新的选中值后赋给`inputValue`，并添加一个`this.$nextTick`延迟执行，以确保视图已经更新完毕后再进行后续操作。

<script>
export default {
  data() {
    return {
      selectedValue: '',
      inputValue: '', // 初始值等于下拉框默认选项
      isFilled: false,
    };
  },
  methods: {
    handleChange(value) {
      this.inputValue = value;
      this.isFilled = true; // 假设必填校验是在value非空时进行的

      this.$nextTick(() => {
        if (value !== '') { // 只有在值非空时才触发必填校验
          this.validateInput();
        }
      });
    },
    validateInput() {
      // 这里是你的必填校验逻辑，如果`inputValue`为空则标记必填错误
      // 比如：this.errors.push('必填') 或者 this.form.required = !this.inputValue;
    },
  },
};
</script>