Git Product home page Git Product logo

vue-area-select's Introduction

基于vue的三级地址选择器


0.演示

demo

1.目标实现效果

1.点击弹出select选择框
2.初始显示省份,点击省份显示对应的市,以此类推。
3.没有对应的市过着区市显示为空或无

2. 实现思路

@requires_authorization
var JSON_ = [
    {
        "id": "110000", 
        "name": "北京市", 
        "child": [
            {
                "id": "110100", 
                "name": "北京市市辖区", 
                "child": [
                    {
                        "id": "110101", 
                        "name": "东城区", 
                        "child": [ ]
                    }, 
                    {
                        "id": "110102", 
                        "name": "西城区", 
                        "child": [ ]
                    }
                ]
            }
        ]
    }]
1.当我们点击北京市 显示北京市市辖区 以此类推 北京为JSON_[0] 下一级显示为为JSON_[0].child的list
以此类推为 JSON_[0].child[it].child 的list,it为上一级选中的项。以上为基本实现逻辑

3.遇到问题

1.在开发过程中使用了vue,并且将其做成了一个组件。所以在写组件时要注意组件之间的传值问题,并且模板必须包裹在一个大的标签中。
2.在模板中写绑定的class时与在页面中有不同之处需要注意

vue-area-select's People

Contributors

ytxbnahn avatar

Stargazers

Seth avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.