vue element ui

最新推荐文章于 2024-06-14 11:03:22 发布

原创最新推荐文章于 2024-06-14 11:03:22 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ui #javascript

本文介绍了如何在Vue项目中利用element-china-area-data库实现省市区级的动态选择器，并通过实例演示了如何导入数据和处理选择改变事件。

部署运行你感兴趣的模型镜像

vue 城市选择器的使用 element-china-area-data

npm 地址： https://www.npmjs.com/package/element-china-area-data
1.安装： npm install element-china-area-data -S
2.使用：

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

案例：

<template>
 
  <div id="app">
 
    <el-cascader
 
      size="large"
 
      :options="options"
 
      v-model="selectedOptions"
 
      @change="handleChange">
 
    </el-cascader>
 
  </div>
 
</template>
 
 
 
<script>
 
  import { regionData,CodeToText } from 'element-china-area-data'
 
  export default {
 
    data () {
 
      return {
 
        options: regionData,
 
        selectedOptions: []
 
      }
 
    },
 
 
 
    methods: {
 
      handleChange (value) {
 
        let data =CodeToText[value[0]]+", "+CodeToText[value[1]]+", "+CodeToText[value[2]];
        console.log(data)
 
      }
 
    }
 
  }
 
</script>

请添加图片描述

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率