Nuxt.js中通过elementui实现省市三级联动

简介

在本篇文章中主要是在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: [
                '重庆',
                ' 成都',
                '长沙',
                '长春',
                ' 承德',
                '大连',
                '大庆',
                ' 大同',
                '丹东',
                '大冶',
                '大连',
                '大庆',
                ' 大同',
                '丹东',
                '大冶',
            ],
        },
    ]
})

这样就实现了，省市县三级联动，是不是很简单，希望我的这篇文章可以帮助到大家

谢谢观看如有不足，敬请指教