下拉框联动问题 赋值时候失效
我想将三个下拉框变成一个组件 初始是没问题的 下拉福州市可以读取接口获取福州市的几个区 然后选区 查到街道 但是直接传值的时候一次性把三个都传进去导致第一个读取了 后面两个被重置了 一个一个传又破坏了组件整体性该怎么办js代码如下
`<template>
<div>
<el-select v-model="value.citycode" class="first-select" placeholder="请选择市级"><el-option v-for="item in citycodeDict" :key="item.id" :label="item.name" :value="item.code"></el-option>
</el-select>
<el-select v-model="value.countrycode" placeholder="请先选择市级">
<el-option v-for="item in countrycodeDict" :key="item.id" :label="item.name" :value="item.code"></el-option>
</el-select>
<el-select v-model="value.towncode" placeholder="请先选择区/县级">
<el-option v-for="item in towncodeDict" :key="item.id" :label="item.name" :value="item.code"></el-option>
</el-select>
</div>
</template>
<script>
export default {
name: 'AreaSelect',model: {
prop: 'value',
event: 'change',
},
props: {
value: Object,
},
data () {
return {
citycodeDict: [{
name: '全部',
code: '',
}],
countrycodeDict: [{
name: '全部',
code: '',
}],
towncodeDict: [{
name: '全部',
code: '',
}],
}
},
watch: {
'value.citycode': {
handler: function (nVal) {
if (!nVal) {
this.reset('countrycodeDict', 'countrycode')
this.reset('towncodeDict', 'towncode')
} else {
const id = this.citycodeDict.find(e => e.code === nVal).id
this.init(id, 'countrycodeDict')
this.value.countrycode = ''
this.value.towncode = ''
}
},
},
'value.countrycode': {
handler: function (nVal) {
if (!nVal) {
this.reset('towncodeDict', 'towncode')
} else {
const id = this.countrycodeDict.find(e => e.code === nVal).id
this.init(id, 'towncodeDict')
this.value.towncode = ''
}
},
},
},
created () {
this.init(1, 'citycodeDict')
},
methods: {
init (id, target) {
const data = {
parentId: id || 1,
}
// 获取列表
const _this = this
this.$http({
url: _this.$http.adornUrl('aa/bb/cc'),
method: 'get',
params: data,
}).then(({ data }) => {
if (data && data.code === 200) {
this[target] = [{ name: '全部', code: '' }]
this[target] = this[target].concat(data.data)
}
})
},
reset (valueDict, value) {
this[valueDict] = [
{
name: '全部',
code: '',
},
]
this.value[value] = ''
},
},
}
</script>
<style scoped>
</style>`
回答
试试这个方案
// data加上一个listen,初始值为truedata:{
cityListen:true;
countryListen:true;
}
// 在if当中加判断,当listen为false时就不清空
"value.citycode": {
handler: function (nVal) {
if (!nVal) {
this.reset("countrycodeDict", "countrycode");
this.reset("towncodeDict", "towncode");
} else {
const id = this.citycodeDict.find((e) => e.code === nVal).id;
this.init(id, "countrycodeDict");
if (this.cityListen) {
this.value.countrycode = "";
this.value.towncode = "";
}else{
this.cityListen = true;
}
}
},
},
"value.countrycode": {
handler: function (nVal) {
if (!nVal) {
this.reset("towncodeDict", "towncode");
} else {
const id = this.countrycodeDict.find((e) => e.code === nVal).id;
this.init(id, "towncodeDict");
if (this.countryListen) {
this.value.towncode = "";
}else{
this.countryListen = true;
}
}
},
}
// 添加赋值的方法,在外部使用ref进行调用
setVal(citycode, countrycode, towncode) {
this.cityListen = false;
this.countryListen = false;
this.value.citycode = citycode;
this.value.countrycode = countrycode;
this.value.towncode = towncode;
},
多谢大佬提供了思路,稍微调整下就行 需要修改下citycodewatch改变时候 的有调用数据库所以会慢点 查询countryDict,这时候 countrycode的watch事件已经完成了 所以需要在调用下 countrycode的watch事件,真的好麻烦 看看后面有没办法优化了
`export default {
name: 'AreaSelect',model: {
prop: 'value',
event: 'change',
},
props: {
value: Object,
},
data () {
return {
cityFlag: true,
countryFlag: true,
citycodeDict: [{
name: '全部',
code: '',
}],
countrycodeDict: [{
name: '全部',
code: '',
}],
towncodeDict: [{
name: '全部',
code: '',
}],
}
},
watch: {
'value.citycode': {
handler: function (nVal) {
const _this = this
if (!nVal) {
this.reset('countrycodeDict', 'countrycode')
} else {
const id = this.citycodeDict.find(e => e.code === nVal).id
this.init(id, 'countrycodeDict', function () {
if (!_this.cityFlag) {
_this.value.countrycode = ''
} else {
_this.cityFlag = false
_this.countryChange(_this.value.countrycode)
}
})
}
},
},
'value.countrycode': {
handler: function (nVal) {
this.countryChange(nVal)
},
},
},
created () {
this.init(1, 'citycodeDict')
},
methods: {
countryChange (nVal) {
if (!nVal) {
this.reset('towncodeDict', 'towncode')
} else if (!this.cityFlag) {
const id = this.countrycodeDict.find(e => e.code === nVal).id
this.init(id, 'towncodeDict')
if (!this.countryFlag) {
this.value.towncode = ''
} else {
this.countryFlag = false
}
}
},
// 数据库读取数据
init (id, target, callback) {
const data = {
parentId: id || 1,
}
// 获取列表
const _this = this
this.$http({
url: _this.$http.adornUrl('major/common/area'),
method: 'get',
params: data,
}).then(({ data }) => {
if (data && data.code === 200) {
this[target] = [{ name: '全部', code: '' }]
this[target] = this[target].concat(data.data)
if (callback) {
callback()
}
}
})
},
// 重置
reset (valueDict, value) {
this[valueDict] = [
{
name: '全部',
code: '',
},
]
this.value[value] = ''
},
setValue (a, b, c) {
this.cityFlag = true
this.countryFlag = true
this.value.citycode = a
this.value.countrycode = b
this.value.towncode = c
},
},
}`
以上是 下拉框联动问题 赋值时候失效 的全部内容, 来源链接: utcz.com/a/97759.html