multi-select-area/index.html

省市区多选组件

<meta charset="utf-8">
<title>areaComponent</title>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="./dist/areaComponent.umd.min.js"></script>
<link rel="stylesheet" href="./dist/areaComponent.css">

<div id="app">
    <table>
        <tr>
          <th>省份</th>
        </tr>
        <tr v-for="(province,index) in data" :key="index">
          <td @click="getId(province.id)">{{province.name}}</td>
        </tr>
      </table>
  <demo :province-id="provinceId" @send-node="sendNode"></demo>
</div>

<script>

const vue = new Vue({
  components: {
    demo: areaComponent
  },
  data() {
    return {
      provinceId: '82257e29990c484f85dd109a4067ba3f',
      data: [
      {
            "id":"8794eb1f73da41d292c428dd6cd2bf88",
            "adcode":"110000",
            "name":"北京市",
            "center":"116.405285,39.904989",
            "level":"province",
            "pid":"0",
            "isDisable":"0"
        },
        {
            "id":"5f57780624b6436b86cecff686dcc9cb",
            "adcode":"120000",
            "name":"天津市",
            "center":"117.190182,39.125596",
            "level":"province",
            "pid":"0",
            "isDisable":"0"
        },
        {
            "id":"53aab5134d794930b875529679b9881c",
            "adcode":"130000",
            "name":"河北省",
            "center":"114.502461,38.045474",
            "level":"province",
            "pid":"0",
            "isDisable":"0"
        },
        {
            "id":"c83b35e38411401e8e928e3fc7338c74",
            "adcode":"140000",
            "name":"山西省",
            "center":"112.549248,37.857014",
            "level":"province",
            "pid":"0",
            "isDisable":"0"
        }
      ]
    }
  },
  mounted() {
    // 点击省份或启用，获取省份id，赋值给provinceId
    
    
  },
  methods: {
    getId(id) {
      console.log(id)
      this.provinceId = id
    },
    sendNode(node) {
      console.log(node)
    }
  }
}).$mount('#app')



</script>