Nuxt.js realizes the three-level linkage of provinces and cities through elementui

Introduction

在本篇文章中主要是在nuxt.js中，带大家实现省市县三级联动，事先需要在nuxt.js中安装element ui

具体安装方法请自行百度，我的是在项目初始化中就已经安装好了，所使用到的数据，都是自己造的数据

数据存放到vuex中，通过mapState 拿到数据，mapState也是vuex的api，

如果不懂的话请下面的这个链接，看完之后能对vuex有大概的了解

About vuex related introduction

Don't say much, just go to the code

html code

  <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 style

.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 code

import {
    
     mapState } from 'vuex'
export default {
    
    
  name: 'Category',
  data() {
    
    
    return {
    
    }
  },
  computed: {
    
    
    ...mapState(['list', 'block']),
  },
}

The data stored in vuex is only reserved for three provinces due to too much data, please add it yourself

export default () => ({
    
    
    list: 'ABCDEFGHJKLMNQRSTWYZ'.split(''),
    block: [{
    
    
            title: 'A',
            cities: [
                '鞍山',
                '安阳',
                '安顺',
                '安庆',
                '大连',
                '大庆',
                ' 大同',
                '丹东',
                '大冶',
                '大连',
                '大庆',
                ' 大同',
                '丹东',
                '大冶',
            ],
        },
        {
    
    
            title: 'B',
            cities: [
                '北京',
                '蚌埠',
                '包头',
                '保定',
                '宝鸡',
                '大连',
                '大庆',
                ' 大同',
                '丹东',
                '大冶',
                '大连',
                '大庆',
                ' 大同',
                '丹东',
                '大冶',
            ],
        },
        {
    
    
            title: 'C',
            cities: [
                '重庆',
                ' 成都',
                '长沙',
                '长春',
                ' 承德',
                '大连',
                '大庆',
                ' 大同',
                '丹东',
                '大冶',
                '大连',
                '大庆',
                ' 大同',
                '丹东',
                '大冶',
            ],
        },
    ]
})

This is achieved. The three-level linkage of provinces, cities and counties is not very simple, I hope this article of mine can help everyone

Thank you for watching. If there are any shortcomings, please advise