el-select绑定值为对象时校验必填失效问题记录

问题描述

el-select绑定对象实现分页下拉查询报销人功能，修改回显时清空报销人没有触发必填校验。

<el-form :inline="true" :rules="orderRules" ref="order" :model="order">
	<el-form-item label="报销人" prop="reimbursementPerson" class="form-item">
	    <el-select
	         v-model="order.reimbursementPerson"
	         filterable
	         remote
	         :remote-method="getReimperson"
	         @visible-change="visibleChange($event, 'getReimperson')"
	         @change="changePerson"
	         value-key="userId"
	         @clear="clearOptions('reimpersonOptions')"
	         clearable
	         placeholder="请选择报销人"
	         v-loadmore:getReimperson="{ data: reimpersonOptions }"
	     >
	         <el-option v-for="item in reimpersonOptions.list" :key="item.userId" :label="item.displayName" :value="{ userId: item.userId, displayName: item.displayName }">
	             <div slot>{{ item.displayName + '(' + item.userName + ')' }}</div>
	         </el-option>
	     </el-select>
	 </el-form-item>
</el-form>

data() {
	return {
		loadings: null,
		order: {},
		reimpersonOptions: { page: 1, total: null, rows: 20, searchName: '', list: [] },
		orderRules: {
	        reimbursementPerson: [
	            {
	                type: 'object',
	                required: true,
	                message: '请选择报销人',
	                trigger: 'change',
	                fields: {
	                    displayName: { type: 'string', required: true, message: '请选择报销人' }
	                }
	            }
	        ]
	    },
	}
},
mounted() {
	this.getDetail()
	this.loadings = this.$loading({
		lock: true,
		text: '加载中，请耐心等待~',
		spinner: 'el-icon-loading',
		background: 'rgba(0, 0, 0, 0.7)'
	})
},
methods: {
	// 下拉框出现时触发
	visibleChange(val, methodName) {
	    if (val) {
	        this[methodName]({ data: false, focus: true })
	    }
	},
	// 清空报销人
	clearOptions(type) {
	    this[type].page = 1
	    this[type].list = []
	    this[type].searchName = ''
	},
	// 分页查询报销人
	getReimperson(obj) {
	    wbUser({
	        page: obj.data ? this.reimpersonOptions.page : 1,
	        rows: this.reimpersonOptions.rows,
	        unitId: this.order.unitid,
	        displayName: obj.data ? this.reimpersonOptions.searchName : obj.focus ? '' : obj
	    })
	        .then(res => {
	            this.pageData(obj, 'reimpersonOptions', res)
	        })
	        .catch(err => {})
	},
	// 选择报销人
	changePerson() {
	    this.$forceUpdate()
	},
	pageData(obj, optionsName, res, varName = 'records') {
	    const data = res.data.data
	    this[optionsName].total = data.total
	    if (!obj.data) {
	        this[optionsName].page = 1
	        this[optionsName].list = data[varName]
	        if (obj.focus) {
	            // focus输入框
	            this[optionsName].searchName = ''
	        } else {
	            // 输入了文字
	            this[optionsName].searchName = obj
	        }
	    } else {
	        this[optionsName].list.push(...data[varName])
	    }
	    this[optionsName].page++
	}
}

// 查询报销详情
    getDetail() {
        getFeeReimbursementDetail({ feeReimbursementId: this.id })
            .then(res => {
                let data = res.data.data
                // 原写法start-------------------------------------
                // this.order = data
                // this.order.reimbursementPerson = {
                //     userId: data.reimbursementPersonId,
                //     displayName: data.reimbursementPersonName
                // }
                // 原写法end---------------------------------------
                
                // 修改后的写法start--------------------------------
                this.order = {
                    ...data,
                    reimbursementPerson: {
                        userId: data.reimbursementPersonId,
                        displayName: data.reimbursementPersonName
                    }
                }
                // 修改后的写法end---------------------------------
                
                console.log(this.order)
                this.reimpersonOptions.list.push({
                    userId: data.reimbursementPersonId,
                    userName: data.reimbursementPersonNo,
                    displayName: data.reimbursementPersonName
                })
                this.reimpersonOptions.list = unique(this.reimpersonOptions.list, 'userId')
                this.order.paymentMoney = Number(data.paymentMoney).toFixed(2)
                //显示tab
                this.$nextTick(() => {
                    this.loadings.close()
                })
            })
            .catch(e => {
                this.$nextTick(() => {
                    this.loadings.close()
                })
            })
    },

解决方法

回显详情原写法代码，打印回显的信息如下：

清空报销人选择框，没有出现必填提示，点击提交按钮也没有出现必填提示而是直接调接口了

回显详情修改后写法，打印回显的信息如下：

清空报销人会出现提示