elementUI 城市联动数据

最新推荐文章于 2023-11-17 10:00:56 发布

转载最新推荐文章于 2023-11-17 10:00:56 发布 · 620 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoxiaossrs/p/9155800.html

文章标签：

#javascript #json #ViewUI

本文介绍如何在Vue项目中实现城市联动功能，通过使用Element UI的级联选择器(Cascader)组件并导入特定的城市数据文件来完成。文章提供了具体的HTML结构和Vue中的JS代码实例。

vue项目要城市联动，所以找了个数据，拼接成elementUI里面的数据格式

elementUI -- 选择 Cascader 级联选择器组件

HMTL:

<div class="block">
      <span class="demonstration">国家/省份/城市/地区</span>
      <el-cascader
        :options="options"
        v-model="selectedOptions"
        @change="handleChange"
        :separator="' '"
      >
      </el-cascader>
</div>


// vue中的JS，从外面引入数据到options

import options from 'country-data.js'


data(){
      return{
        selectedOptions: [],//存放默认值
        options:options   //存放城市数据
}
methods:{
  handleChange(value) {
        console.log(value);
      }
}

数据下载地址：https://github.com/Summer-Lin/country-data

转载于:https://www.cnblogs.com/xiaoxiaossrs/p/9155800.html