19js / address-element-vue

基于elementUi的vue 省市区三级联动组件 ，返回省市id与名称，可以清除所有，可以搜索

address-element-vue

基于elementUi的vue 省市区三级联动组件 ，返回省市id与名称

Build Setup

npm i address-element-vue

使用

全局使用
main.js
import Address from 'address-element-vue'
Vue.use(Address)
局部使用 
import {Address} from 'address-element-vue'
components: {
           addressSelect: Address
      },
示例：
   <template>
     <div id="app">
       <address-select :order-address="orderAddress"></address-select>
       <button @click="sure">确定</button>
     </div>
   </template>
   
   <script>
   import {Address} from 'address-element-vue'
   export default {
     name: 'App',
       data(){
         return {
             orderAddress:{city_id: 110001,
                 city_name: "北京市",
                 province_id: 110000,
                 province_name: "北京市",
                 region_id: 110101,
                 region_name: "东城区"}
         }
     },
     components: {
          addressSelect: Address
     },
       ,methods:{
         sure(){
             console.log(this.orderAddress)
           }
       }
   }
   </script>

• orderAddress 可以自定义 是一个对象:

{province_id:'',province_name:'',city_id:'',city_name:'',region_id:'',region_name:''}

获取与更改数据库

• sql文件位于mysql/bd_area.sql
• 组件引用的省市区地址文件位于 src/assets/address.json
• 以下为php代码导入数据库，以及生成address.json文件的示例

//将address.json文件导入数据库
 public static function initData(){
       $data=file_get_contents("./address.json");
       $datas=json_decode($data,true);
       $temp=[];
       foreach ($datas as $vo){
           $temp[]=['id'=>$vo['code'],'name'=>$vo['name'],'pid'=>0,'level'=>1];
           if($vo['cityList']){
               foreach ($vo['cityList'] as $v){
                   if($v['code']==$vo['code']){
                       $code=$v['code']+1;
                   }else{
                       $code=$v['code'];
                   }
                   $temp[]=['id'=>$code,'name'=>$v['name'],'pid'=>$vo['code'],'level'=>2];
                   if($v['areaList']){
                       foreach ($v['areaList'] as $val){
                           $temp[]=['id'=>$val['code'],'name'=>$val['name'],'pid'=>$code,'level'=>3];
                       }
                   }
               }
           }
       }
       self::insertAll($temp);
   }
//生成address.json
   public static function getVueJson(){
      $res= self::select();
      $temp=[];
      $temp1=[];
      $temp2=[];
      foreach ($res as $vo){
          $temp1[$vo['id']]=$vo;
          if($vo['pid']==0){
              $temp[$vo['id']]=['value'=>$vo['id'],'label'=>$vo['name'],'id'=>$vo['id']];
          }else{
              if($vo['level']==2){
                  $temp[$vo['pid']]['children'][]=['value'=>$vo['id'],'label'=>$vo['name'],'id'=>$vo['id']];
              }
              if ($vo['level']==3){
                  $temp2[$vo['pid']][]=['value'=>$vo['id'],'label'=>$vo['name'],'id'=>$vo['id']];
              }
          }
      }
    foreach ($temp as &$vo){
          if(isset($vo['children'])){
              foreach ($vo['children'] as &$v){
                  if(isset($temp2[$v['id']])){
                      $v['children']=$temp2[$v['id']];
                      unset($temp2[$v['id']]);
                  }
              }
          }
    }
   return file_put_contents('addressListsForVue.json',json_encode(['data'=>array_values($temp),'list'=>$temp1]));
   }

发布说明

1.0.10

• 添加局部引用功能

1.0.9

无效

1.08

• 新增源码连接
• GitHub地址

1.0.7

• 修改1.0.5为解决的问题
• 修改因为未正确引入地址而导致无法初始化数据的问题

1.0.6

• 修复因webpack引起的路由加载问题

1.0.5

• 修改因为未正确引入地址而导致无法初始化数据的问题

#　源码地址 GitHub地址