关于地址下拉选择框select的三级联调

Question

老师，您好，我按照自己的思路基本效果能出来，前面试了好多次计算属性和监视，都没把效果弄出来，脑子比较乱，现在弄出来了但是很多bug。有几个问题想请教老师

1.比如我想刚弹出modal的时候下拉选择框都是默认的提示信息，因为select用了双向绑定，我只能在给checkItem里的省份市和区给定默认值，才能够正常显示出来，请问还有什么方法能解决吗？
2.这样写我改变省选择框的值市区会跟着改变，市区重新选县/区也会改变，但是如果我直接改变省，县区不会跟着改变，我既然都改变了省的值，县为什么不会跟着变呢？
3.我始终觉得这样写思路不是很清楚，如果老师是您的话你会选择怎样做呢？能否把思路讲给我听，我重新再跟着老师的思路写一遍

代码如下
这是界面
getProvinceCityDistricct是获取到的地址信息，this.city和this.district是用来保存对应的省下面的市和区/县的，地址信息结构如下

Answer 1

提问者 拍拍你的头 2021-06-23 14:13:25

老师，我这样写后其余的都没问题了，就是发现一个新bug，我添加好地址之后，立马点开编辑该地址没有问题，但是我添加地址保存后，再点一下添加地址，然后重新选几下城市之后，不保存直接退出，再点击刚才保存的了那个地址，我的选择框不会停留在对应地址上，而是乱了

我认为是我再添加不保存重新选择选择框的时候改变了item里的值，但是点击编辑的时候checkeditem应该是重新赋值为list的，如图，点击编辑后明明是相同的，这是为什么呢？

Answer 2

河畔一角 2021-06-24 11:16:02

关闭弹框后，需要重置表单。有一个resetField方法

• 提问者 拍拍你的头 #1

  老师，还是没搞懂，我们这个弹窗都不是个表单啊？定义modal的时候虽然有设置modalType但是并没有实现这个功能的

• 河畔一角 #2

  外面加一个el-form就变成表单了。我们只要解决关闭以后数据重置就可以了。或者关闭的时候手动一个一个清空

• 提问者 拍拍你的头 回复 河畔一角 #3

  老师，我el-form用的不会用，关闭的时候数据重置？可是我这个在打开窗口选择下拉框的时候，我看vue里的数据已经被改动了，我就算关闭了清空它不应该还是已经变化了吗？

点开查看后面1条评论

Answer 3

河畔一角 2021-06-24 09:28:22

有两种方案：

一、直接给省市绑定onChange事件，触发的时候修改市区，清空县字段。

二、直接通过watch监听省份model的变化，从新赋值市，清空县。

• 提问者 拍拍你的头 #1

  老师，您看下我下面的回复，这个问题是出在哪里呢？