Escenas:
El componente de entrada de búsqueda remota el-autocompletar en el elemento se utiliza
como se muestra en la figura. Cuando se ingresa el código de comerciante, se iniciará una solicitud de interfaz de acuerdo con el contenido de entrada, y los datos solicitados se mostrarán en la lista desplegable de búsqueda. abajo de la lista; cuando se selecciona un código haciendo clic, el código correspondiente se repetirá el nombre de la tienda. Específicamente, se implementa en el siguiente código.
pregunta:
Al cerrar el cuadro emergente, el contenido debe borrarse. En este momento, el objeto del formulario se borra directamente.Después de seleccionar el código de comerciante, el nombre del comerciante no se repite, pero hay un valor después de la impresión.
Vue.js no puede monitorear la adición y eliminación de propiedades de objetos, porque los métodos getter y setter se llamarán durante el proceso de inicialización del componente Vue, por lo que la propiedad debe existir en los datos y la capa de vista responderá al cambio de los datos.
Hay tres formas de resolver este problema:
primero, la operación de vaciado solo asigna las propiedades en el objeto a cadenas vacías
this.relatedSellerForm.vendorNo = ''
this.relatedSellerForm.vendorName = ''
El segundo es usar this.$set(obj, key, value) al asignar un nuevo valor a un objeto
this.$nextTick(()=> {
this.$set(this.relatedSellerForm, 'vendorNo', value)
})
this.$set(this.relatedSellerForm, 'vendorNo', item.vendorNo)
El tercero es usar el método Object.assign(objetivo, fuentes) al asignar un nuevo valor a un objeto
this.relatedSellerForm.vendorName = item.vendorName
this.relatedSellerForm = Object.assign({
}, this.relatedSellerForm)
Implementación del código de función:
<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>