解决elementUI多选下拉框组件进入页面就自动进行校验的问题

解决elementUI多选下拉框组件进入页面就自动进行校验的问题

原因：因为校验字段设置为undefined
解决：将字段初始值设置为[]

<el-form-item label="添加菜品" prop="productIds">
  <el-select
    v-model="comboForm.productIds"
    multiple
    placeholder="请选择"
    style="width: 100%"
    @change="handelChangeProduct"
  >
    <el-option
      v-for="item in comboProductList"
       :key="item.productId"
       :label="item.productName"
       :value="item.productId"
      >
     </el-option>
  </el-select>
</el-form-item>

// 校验规则
rules: {
  productIds: [{ required: true, trigger: "change", message: "套餐菜品不能为空" }],
  ...
},

解决

this.comboForm = {
	// productIds: undefined,
	productIds: [],
	...
};