vue省市区三级联动vue-area-linkage

1、安装vue-area-linkage插件：npm install --save vue-area-linkage --2、main.js里面注入import VueAreaLinkage from 'vue-area-linkage'import 'vue-area-linkage/dist/index.css'Vue.use(VueAreaLinkage) 3、组件里：<are

lan829928

3667人浏览 · 2018-05-22 16:03:18

lan829928 · 2018-05-22 16:03:18 发布

1、安装vue-area-linkage插件：npm install --save vue-area-linkage --

2、main.js里面注入

 
  import 
  VueAreaLinkage 
  from 
  'vue-area-linkage' 
 
 
  import 
  'vue-area-linkage/dist/index.css' 
 
 
  Vue. 
  use( 
  VueAreaLinkage) 
 

3、组件里：

 
 < 
 area-select 
 type= 
 'all' 
 :placeholders=" 
 placeholders" 
 :level=' 
 2' 
 v-model=" 
 send_search_form. 
 selected" 
 :data=" 
 pcaa" 
 > 

 
 </ 
 area-select 
 > 

 
  // 三级联动 
 
 
  import { 
  AreaSelect } 
  from 
  "vue-area-linkage"; 
 
 
  import 
  AreaData 
  from 
  "area-data"; 
 
 
  import { 
  pca, 
  pcaa } 
  from 
  "area-data"; 
 

 
   export 
   default { 
  
   component: { 
  
   AreaSelect: 
   AreaSelect 
  
    }, 
  
   data() { 
  
   return { 
  
   pca: 
   pca, 
  
   pcaa: 
   pcaa, 
  
   placeholders: [ 
   " ", 
   " ", 
   " "], 
  
     send_search_form: { 
    
     orderCode: 
     "", 
    
     itemName: 
     "", 
    
     orderTime: [], 
    
     consigneeName: 
     "", 
    
     state: 
     "", 
    
     selected: [] 
    
      }, 
    
   }, 
 
   }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^