【问题第3期】area-data-vue使用及踩坑处

安装

使用 npm 安装

npm i --save area-linkage-vue area-data-vue
复制代码

使用

import Vue from 'vue';
import { pcaa } from 'area-data-vue';
import 'area-linkage-vue/dist/index.css';
import AreaLinkageVue from 'area-linkage-vue';
Vue.prototype.$pcaa = pcaa;

Vue.use(AreaLinkageVue)
复制代码

<area-select v-model="selected" :data="$pcaa" :level="0"></area-select>  // 省
<area-select v-model="selected" :data="$pcaa" :level="1"></area-select>  // 省市
<area-select v-model="selected" :data="$pcaa" :level="2"></area-select>  // 省市区
<area-select v-model="selected" :data="$pcaa" :level="3"></area-select>  // 省市区街道

<area-cascader v-model="selected2" :data="$pcaa" :level="0"></area-cascader>  // 省市
<area-cascader v-model="selected2" :data="$pcaa" :level="1"></area-cascader> // 省市区
<area-cascader v-model="selected2" :data="$pcaa" :level="2"></area-cascader> // 省市区街道

复制代码

更多演示访问 这里.

属性

area-select 组件

area-cascader 组件

事件

坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑坑

在选择省市县或者初始化回显数据时没有问题的，但是近期工作中的一个需求通过选择地图位置来改变省市县及详细地址。正常思路大致是：将返回的code码赋值selected，组件会自动改变，理想很丰满，现实很骨感。遗憾的是并没有发生变化，通过vue调试工具发现通过prop传入来已经改变的数据，但是页面并没有发生任何变化。如何解决妮？？

因为这组件只有初始化时回显没问题，那当需要改变省市县时我们对这个组件进行初始化，通过这种方案解决来问题，但感觉这时组件的bug,建议修复，有更好的解决方案欢迎留言！！！具体方案如下：

<template>
  <area-cascader v-model="selected2" v-if="isInit" :data="$pcaa" :level="0"></area-cascader>
</template>
<script>
export default {
  data() {
    return {
      selected2: [],
      isInit: true
    }
  },
  methods: {
    handleChange(){
      this.isInit = false
      this.selected2 = [140000, 140300, 140311]
      this.$nextTick(() => {
        this.isInit = true
      })
    }
  }
}
</script>
复制代码