Element UI 中国省市区级联数据_provinceandcitydata 获取地区

2401_87288783

于 2024-09-21 20:47:35 发布

阅读量104

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2401_87288783/article/details/142423897

版权

省市二级联动（不带“全部”选项）:

<template>

  <div id="app">

    <el-cascader

      size="large"

      :options="options"

      v-model="selectedOptions"

      @change="handleChange">

    </el-cascader>

  </div>

</template>



<script>

  import { provinceAndCityData } from 'element-china-area-data'

  export default {

    data () {

      return {

        options: provinceAndCityData,

        selectedOptions: []

      }

    },



    methods: {

      handleChange (value) {

        console.log(value)

      }

    }

  }

</script>

+ 省市二级联动（带“全部”选项）:

 
```
<template>

  <div id="app">

    <el-cascader

      size="large"

      :options="options"

      v-model="selectedOptions"

      @change="handleChange">

    </el-cascader>

  </div>

</template>



<script>

  import { provinceAndCityDataPlus } from 'element-china-area-data'

  export default {

    data () {

      return {

        options: provinceAndCityDataPlus,

        selectedOptions: []

      }

    },



    methods: {

      handleChange (value) {

        console.log(value)

      }

    }

  }

</script>
```
+ 省市区三级联动（不带“全部”选项）

<template>

  <div id="app">

    <el-cascader

      size="large"

      :options="options"

      v-model="selectedOptions"

      @change="handleChange">

    </el-cascader>

  </div>

</template>



<script>

  import { regionData } from 'element-china-area-data'

  export default {

    data () {

      return {

        options: regionData,

        selectedOptions: []

      }

    },



    methods: {

      handleChange (value) {

        console.log(value)

      }

    }

  }

</script>

+ 省市区三级联动（带“全部”选项）

<template>

  <div id="app">

    <el-cascader

      size="large"

      :options="options"

      v-model="selectedOptions"

      @change="handleChange">

    </el-cascader>

  </div>

</template>



<script>

  import { regionDataPlus } from 'element-china-area-data'

  export default {

    data () {

      return {

        options: regionDataPlus,

        selectedOptions: []

      }

    },



    methods: {

      handleChange (value) {

        console.log(value)

      }

    }

  }