vue的省市区选择 vue-area-linkage
先说想要的样式安装的组件npm i --save vue-area-linkage area-data在main.js里调用import Vue from 'vue'import VueAreaLinkage from 'vue-area-linkage'Vue.use(VueAreaLinkage)在要使用组件的地方调用import 'vue-area-linkage/di...
·
先说想要的样式
安装的组件
npm i --save vue-area-linkage area-data
在main.js里调用
import Vue from 'vue'
import VueAreaLinkage from 'vue-area-linkage'
Vue.use(VueAreaLinkage)
在要使用组件的地方调用
import 'vue-area-linkage/dist/index.css'
import { pca, pcaa } from 'area-data'
data中需要定义的变量
data () {
return {
pca: pca,
pcaa: pcaa
}
}
调用的方式
<area-cascader :level="1" type="text" placeholder="请选择地区" v-model='form.address' :data="pcaa"></area-cascader>
然后发现是这样的
改变下样式
.area-select.large{
width: 100%;
line-height: 20px;
}
结果
成功
最后说下省市是这样调用
<area-cascader v-model="selected2" :data="pcaa"></area-cascader>
三级联动是这样调用
<area-select type='all' :level='2' v-model="selected" :data="pcaa"></area-select>
二级联动
<area-select type='all' :level='1' v-model="selected" :data="pcaa"></area-select>
更多推荐
已为社区贡献4条内容
所有评论(0)