中国省市区最新数据

中国省市区最新数据,适合 vue项目element ui 的选择器

element ui 使用数据示例:


 <el-cascader
    :options="cityOptions"
  //  :value="city"
      :props="props"
  //   v-model 绑定的是一个数组
    @change="changeProvince"
    change-on-select
  >
  </el-cascader>

<script>
导入 
import cityOptions from '@/js/city_data2017_element.js'
export default {
  props: {},
  data() {
    return {
  //data中绑定数据
  cityOptions: cityOptions,
 //props中导入 valid值显示
  props:{
    value:"city"
}


//与form表单结合的使用示例:

<el-form
        :model="editAddressForm"
        :rules="editAddressRules"
        ref="editAddressRef"
        label-width="100px"
      >
        <el-form-item label="省市区/县:" prop="address">
          <el-cascader
            v-model="editAddressForm.address"
            :options="cityOptions"
            :props="cascderProps"
          ></el-cascader>
        </el-form-item>
</el-form>

<script>
import cityOptions from "@/components/Order/city";
export default {
  props: {},
  data() {
    return {
          cityOptions,
          editAddressForm: {
               address: [],
                 },
          editAddressRules: {
        address: [{ required: true, message: "请选择地址", trigger: "blur" }],
      },
         cascderProps: {
        value: "city",
        expandTrigger: "hover",
      },
}

 可以去这个网址上下载对应的js文件

https://github.com/iceyangcc/provinces-china

猜你喜欢

转载自blog.csdn.net/weixin_59739381/article/details/131863352