之前的同城联动是三选写的。这次我使用了cascader联动下拉来优化用户体验。用户体验异步加载，即点击一级加载下一级数据="宽度：300px;"placeholder="selectregion">data(){return{province:[{}],//这个数据是组件初始化创建的异步加载的数据，空对象加在里面为el-cascader初始化没有数据报错的原因组件的一级数据开始加载不带addressProps:{label:'area_name',value:'area_id',lazy:true,//开启异步加载lazyLoad(node,resolve){const{value,level}=nodegetPlace({pid:value}).then(res=>{if(res.code===200){if(level===2){//level=2是因为我的城市数据只能选到第三层，第二层加载第三层数据resolve(res.data.map(item=>{item.leaf='leaf'//这个必须加，就是让组件识别是否是最后一级返回项目}))}else{resolve(res.data)}}})}}}}上面的代码是我对el-cascader的初始化代码，现在看起来没问题，接下来就是数据echoaddressArr获取后数据，需要加载相应的树结构数据，比如我选择的是广东-深圳-罗湖，那么我保存的addressArr=["440000","440300","440303"]，当我拿到这个数据的时候，我将其绑定在数据中对于给定的省份，数据需要嵌套。比如province就是一级数据，即省份。找到id=440000的数据，添加一个children属性名，属性值为广东所属的所有城市，即所有parentLevelid=440000的数据，这是第二层，深圳也是第二层，然后我们继续找深圳，同样添加children:parentid=440300数据，这样就完成了echo需要的数据准备好了；上面的操作完成后，会出现几个小坑，数据已经读取了，但是组件还是没有选择对应的数据，还是展开后的第一层。这时候需要重新渲染el-cascader组件，使用v-if或者使用key可以避免第一个坑，还有一个坑是datarendering，展开后选择了，但是没有显示在输入上。这就是叶子属性的问题。您需要处于最后一个级别。所有数据都加上item.leaf='leaf'，最后贴上我的城市数据处理的步骤供大家参考加个小坑，就是你的默认值数据类型必须和id的数据类型一样城市数据。比如addressArr=["440000","440300","440303"]是一个字符串，链接到城市的数据也必须是一个字符串，否则就转过来。//获取城市和地区asyncgetAddress(){//如果省份加载未完成if(!this.addressInit){this.addressInit=trueawaitgetPlace().then(res=>{if(res.code===200){this.province=res.data}else{this.$message.error(res.msg)}})}//获取相应的城市数据并插入省份的孩子getPlace({pid:this.addressArr[0]}).then(res=>{returnnewPromise((resolve,reject)=>{if(res.code===200){for(leti=0;i
