场景：
element中的 input远程搜索el-autocomplete组件 使用
如图，当输入商家编码时，会根据输入的内容发起接口请求，请求数据展示在搜索下拉列表里；当点击选中某个编码时，回显对应的商家名称。具体在下面代码中有实现。
问题：
在关闭弹框时，需要清空内容。此时直接清空了form对象，在选中商家编码后，商家名称没有进行回显，打印后却有值。
vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化。
解决该问题有三种方法：
第一种，清空操作只将对象中的属性赋值为空字符串
this.relatedSellerForm.vendorNo = ''
this.relatedSellerForm.vendorName = ''
第二种，在给对象进行新的赋值时，使用this.$set(obj, key, value)
this.$nextTick(()=> {
this.$set(this.relatedSellerForm, 'vendorNo', value)
})
this.$set(this.relatedSellerForm, 'vendorNo', item.vendorNo)
第三种，在给对象进行新的赋值时，使用Object.assign(target, sources)方法
this.relatedSellerForm.vendorName = item.vendorName
this.relatedSellerForm = Object.assign({
}, this.relatedSellerForm)
功能代码实现：
<el-table-column min-width="260" label="操作" align="center" fixed="right">
<template slot-scope="scope">
<el-button @click="relatedSeller(scope.row)" type="text" size="mini" v-if="!scope.row.vendorInfo">关联卖家</el-button>
<el-button @click="disassociate(scope.row)" type="text" size="mini" v-if="scope.row.vendorInfo">取消关联</el-button>
</template>
</el-table-column>
<!-- 关联卖家弹框 -->
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisibleRelatedSeller" title="关联卖家" width="500px">
<el-form :model="relatedSellerForm">
<el-form-item label="商家编码">
<el-autocomplete
v-model="relatedSellerForm.vendorNo"
:fetch-suggestions="querySearchAsync"
placeholder="请输入商家编码"
@input="keyUpMerchantCode"
@select="handleSelect"
value-key="vendorNo"
label="vendorNo"
size="mini"
></el-autocomplete>
</el-form-item>
<el-form-item label="商家名称">
<el-input
v-model="relatedSellerForm.vendorName"
:disabled="true"
class="inputW"
size="mini">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogVisibleRelatedSeller = false">关 闭</el-button>
<el-button :disabled="isDisabled" size="mini" type="primary" @click="doHandelRelatedSeller">确认关联</el-button>
</div>
</el-dialog>
<script>
const activityUrl = {
// 列表和查询
getMarketList: '/bazaar/a/o/copartnerBackstage/list',
// 取消关联
cancelRelate: '/bazaar/a/o/copartnerBackstage/cancelRelate',
// 关联卖家列表
selectVendorInfo: '/bazaar/a/o/copartnerBackstage/selectVendorInfo',
// 确认关联
relateVendor: '/bazaar/a/o/copartnerBackstage/relateVendor',
}
export default {
data() {
isDisabled: false,
// 关联卖家
relatedSellerForm: {
copartnerId: '', // 合伙人id
vendorNo: '', //商家编码
vendorName: '', // 商家名称
},
dialogVisibleRelatedSeller: false,
merchantCodeList: [], // 商家编码下拉列表
},
mounted() {
// 表格数据
this.doSearchHandel()
},
methods: {
// 关联卖家
relatedSeller(row) {
this.dialogVisibleRelatedSeller = true
// 这里不能直接赋值为空对象，vue不能监听对象属性的添加和删除，否则直接this赋值时，视图层无法更新
// 直接赋值为空对象，下面赋新值时需要使用this.$set(obj, key, value)或Object.assign(target, sources)
// this.relatedSellerForm.vendorNo = ''
// this.relatedSellerForm.vendorName = ''
this.relatedSellerForm = {
}
this.merchantCodeList = []
this.relatedSellerForm.copartnerId = row.id
},
// 关联卖家商家编码 数据
loadAll(str) {
let param = {
vendorNo: str}
return this.$http.post(activityUrl.selectVendorInfo, param).then((res) => {
if (res.code === 0) {
this.merchantCodeList = res.data
return res.data
} else {
this.$message(res.msg)
}
})
},
// 不能输入特殊符号
keyUpMerchantCode(e) {
let value = e.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g, '').replace(/\s/g, "")
this.$nextTick(()=> {
this.$set(this.relatedSellerForm, 'vendorNo', value)
})
},
// queryString 输入的值
// cb 回调函数 用于将results数据回显到页面上
// results 下拉列表
async querySearchAsync(queryString, cb) {
let merchantCodeList = this.merchantCodeList
let results = queryString && queryString.length > 5 ? await this.loadAll(queryString) : merchantCodeList
if (results) {
cb(results)
}
},
// 选中某一项
handleSelect(item) {
// this.relatedSellerForm.vendorNo = item.vendorNo
// this.relatedSellerForm.vendorName = item.vendorName
this.$set(this.relatedSellerForm, 'vendorNo', item.vendorNo)
this.relatedSellerForm.vendorName = item.vendorName
this.relatedSellerForm = Object.assign({
}, this.relatedSellerForm)
},
// 确认关联
doHandelRelatedSeller() {
if(this.relatedSellerForm.vendorNo.toString().trim() === '') {
this.$message("请输入商家编码")
return
}
if(this.relatedSellerForm.vendorName.toString().trim() === '') {
this.$message("商家名称不能为空")
return
}
this.isDisabled = true
let params = this.relatedSellerForm
this.$http
.post(activityUrl.relateVendor, params)
.then((res) => {
if (res.code === 0) {
this.$message.success("关联成功")
this.dialogVisibleRelatedSeller = false
this.isDisabled = false
this.doSearchHandel()
return
}
throw new Error(res.msg)
})
.catch((e) => {
this.$notify.error(e.message)
this.isDisabled = false
})
},
// 取消关联
disassociate(row) {
this.$confirm('确定要取消关联该合伙人卖家吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.disassociateDialogConfirm(row)
}).catch((e) => {
this.$loading.hide()
this.$notify.error({
title: '提示',
message: '取消成功'
})
})
},
// 确认取消关联
disassociateDialogConfirm(row) {
this.$http
.post(activityUrl.cancelRelate, {
copartnerId: row.id })
.then((res) => {
this.$loading.hide()
if (res.code === 0) {
this.$notify({
message: "取消关联成功",
type: "success"
});
this.doSearchHandel()
return
}
throw new Error(res.msg)
})
.catch((e) => {
this.$loading.hide()
this.$notify.error({
title: '提示',
message: e.message
})
})
},
}
}
</script>