问题描述
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()
})
})
},
解决方法
回显详情原写法代码,打印回显的信息如下:
清空报销人选择框,没有出现必填提示,点击提交按钮也没有出现必填提示而是直接调接口了
回显详情修改后写法,打印回显的信息如下:
清空报销人会出现提示