简介
在本篇文章中主要是在nuxt.js中,带大家实现省市县三级联动,事先需要在nuxt.js中安装element ui
具体安装方法请自行百度,我的是在项目初始化中就已经安装好了,所使用到的数据,都是自己造的数据
数据存放到vuex中,通过mapState 拿到数据,mapState也是vuex的api,
如果不懂的话请下面的这个链接,看完之后能对vuex有大概的了解
关于vuex的相关介绍
话不多说直接上代码
html代码
<div class="cont">
<dl class="m-categroy">
<dt>按字母顺序选择</dt>
<dd v-for="(item, index1) in list" :key="index1">
<a :href="'#city-' + item">{
{item}}</a>
</dd>
</dl>
<dl v-for="(item, index2) in block" :key="index2" class="m-categroy-section">
<dt :id="'city-' + item.title">{
{item.title}}</dt>
<dd>
<span v-for="(city, index3) in item.cities" :key="index3">{
{city}}</span>
</dd>
</dl>
</div>
css样式
.m-categroy {
display: flex;
margin: 0 auto;
margin-bottom: 30px;
margin-top: 40px;
width: 1190px;
dt {
font-size: 16px;
color: #333;
font-weight: 500;
}
dd {
font-size: 15px;
color: #666;
margin: 0 6px;
width: 24px;
height: 24px;
padding: 4px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
border-radius: 50%;
&:hover {
background: #F8F8F8;
}
}
}
.m-categroy-section {
display: flex;
margin: 0 auto;
width: 1190px;
padding: 13px 30px 13px 10px;
border-radius: 10px;
&:hover {
background: #F8F8F8;
}
dt {
box-sizing: border-box;
vertical-align: top;
padding-top: 10px;
display: inline-block;
text-align: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: #fff;
background: #13D1BE;
box-shadow: 0 4px 5px 0 rgba(39, 178, 164, .22);
}
dd {
flex: 1;
span {
margin: 10px 20px;
color: #666;
display: inline-block;
font-size: 14px;
}
}
}
js代码
import {
mapState } from 'vuex'
export default {
name: 'Category',
data() {
return {
}
},
computed: {
...mapState(['list', 'block']),
},
}
vuex存放的数据 由于数据太多 只保留三个省的具体请自行添加即可
export default () => ({
list: 'ABCDEFGHJKLMNQRSTWYZ'.split(''),
block: [{
title: 'A',
cities: [
'鞍山',
'安阳',
'安顺',
'安庆',
'大连',
'大庆',
' 大同',
'丹东',
'大冶',
'大连',
'大庆',
' 大同',
'丹东',
'大冶',
],
},
{
title: 'B',
cities: [
'北京',
'蚌埠',
'包头',
'保定',
'宝鸡',
'大连',
'大庆',
' 大同',
'丹东',
'大冶',
'大连',
'大庆',
' 大同',
'丹东',
'大冶',
],
},
{
title: 'C',
cities: [
'重庆',
' 成都',
'长沙',
'长春',
' 承德',
'大连',
'大庆',
' 大同',
'丹东',
'大冶',
'大连',
'大庆',
' 大同',
'丹东',
'大冶',
],
},
]
})
这样就实现了,省市县三级联动,是不是很简单,希望我的这篇文章可以帮助到大家
谢谢观看如有不足,敬请指教