vue实现三级联动，多级联动

最新推荐文章于 2024-06-18 13:09:27 发布

进无止进

最新推荐文章于 2024-06-18 13:09:27 发布

阅读量3.2w

点赞数 13

分类专栏： Javascript Vue 前端文章标签： vue.js 三级联动多级联动 vue省市区三级联动

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/lihchweb/article/details/89510864

版权

Javascript 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

前端

20 篇文章 0 订阅

订阅专栏

Vue

6 篇文章 1 订阅

订阅专栏

vue做项目的时候，遇到了要实现多级联动的需求，由于只是小功能，就没有引入插件，自己实现了一下。

需求：需要统计用户购买的3C产品的信息，如下图

需求描述

需求评审的时候确定了让前端存储维护产品信息，所以下面代码中会保存着这些信息，而不是以通过请求后端接口的形式获得。

数据大概是这样的结构：

 var product = [
                {
                    brand: 'Apple',
                    type: [
                        {
                            type: 'iPhone',
                            name: [
                                {
                                    name: 'iPhone XS',
                                    ram: [
                                        {
                                            ram: '64G',
                                            color: ['金色', '白色', '绿色']
                                        },
                                        {
                                            ram: '128G',
                                            color: ['金色', '白色', '绿色']
                                        }
                                    ]
                                },
                                {
                                    name: 'iPhone XS MAX',
                                    ram: [
                                        {
                                            ram: '64G',
                                            color: ['金色', '白色', '绿色']
                                        },
                                        {
                                            ram: '128G',
                                            color: ['金色', '白色', '绿色']
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            type: 'iPad',
                            name: [
                                {
                                    name: 'IPad Air 无线局域网机型',
                                    ram: [
                                        {
                                            ram: '64G',
                                            color: ['金色', '白色', '绿色']
                                        },
                                        {
                                            ram: '128G',
                                            color: ['金色', '白色', '绿色']
                                        }
                                    ]
                                },
                                {
                                    name: 'Ipad Air 无线局域网 + 蜂窝网络机型',
                                    ram: [
                                        {
                                            ram: '64G',
                                            color: ['金色', '白色', '绿色']
                                        },
                                        {
                                            ram: '128G',
                                            color: ['金色', '白色', '绿色']
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]

多级联动部分主要html部分：

<!-- vue挂载的元素上设置v-cloak属性，并在css里设置[v-cloak] {display: none;} 来防止页面加载时闪烁出现vue标签或者指令的问题-->
<div id="app" v-cloak>
    <ul class="select-options">
        <li>
        	<!-- 选取品牌时，将产品类型，产品名称，内存，颜色，IMEI等置空，为null -->
        	<!-- 下面分别选择产品类型，名称，内存，颜色时同理，需要将相应的值置空 -->
            <label>选择品牌</label>
            <select v-model='brand' @change="type=null,name=null,ram=null, color=null, imei=null">
                <option disabled="disabled" :value="null">请选择</option>
                <option v-for='(item, index) in product' :value="index">{{item.brand}}</option>
            </select>
        </li>
        <li>
            <label>产品类型</label>
            <select v-model='type' @change="name=null,ram=null, color=null, imei=null">
                <option disabled="disabled" :value="null">请选择</option>
                <option v-for='(item, index) in typeArray' :value="index">{{item.type}}</option>
            </select>
        </li>
        <li>
            <label>产品名称</label>
            <select v-model='name' @change="ram=null, color=null, imei=null">
                <option disabled="disabled" :value="null">请选择</option>
                <option v-for='(item, index) in nameArray' :value="index">{{item.name}}</option>
            </select>
        </li>
        <li>
            <label><span><i>内</i><i>存</i></span></label>
            <select v-model='ram' @change="color=null, imei=null">
                <option disabled="disabled" :value="null">请选择</option>
                <option v-for='(item, index) in ramArray' :value="index">{{item.ram}}</option>
            </select>
        </li>
        <li>
            <label><span><i>颜</i><i>色</i></span></label>
            <select v-model='color' @change="imei=null">
                <option disabled="disabled" :value="null">请选择</option>
                <option v-for='(item, index) in colorArray' :value="index">{{item}}</option>
            </select>
        </li>
        <li v-show="imeiShow">
            <label @click="showImeiTip">IMEI码</label>
            <input type="text" v-model="imei">
            <img src="./img/3c_camera.png" @click="useCamera" alt="">
        </li>
    </ul>
    <div class="btn" @click="submit()">提交信息</div>

</div>

多级联动JS部分：

var app = new Vue({
        el: '#app',
        data: {
            imei: '',
            imeiMaskShow: false,
            cameraShow: false,
            brand: null,
            type: null,
            name: null,
            ram: null,
            color: null,
            error: null,
            submitFlag: true,
            product: product
        },
        created: function () {
        },

        computed: {
        	//获得品类信息
            typeArray: function () {
                return this.brand !== null ? this.product[this.brand].type : null
            },
            //获得所选取产品名称信息
            nameArray: function () {
                return (this.type !== null && this.typeArray.length) ? this.typeArray[this.type].name : null
            },
            //获得所所选产品内存信息
            ramArray: function () {
                return (this.name !== null && this.nameArray.length) ? this.nameArray[this.name].ram : null
            },
            //获得所选产品颜色信息
            colorArray: function () {
                return (this.ram !== null && this.ramArray.length) ? this.ramArray[this.ram].color : null
            },
            //获得所选产品IMEI信息
            //当所选产品类型是iPhone时，显示IMEI选项
            imeiShow: function () {
                return this.brand === 0 && this.type === 0 ? true : false
            },
            //提交前的完整性验证
            check: function () {
                this.error = null;
                switch (true) {
                    case this.brand === null:
                        this.error = '品牌'
                        break;
                    case this.type === null:
                        this.error = '产品类型'
                        break;
                    case this.name === null:
                        this.error = '产品名称'
                        break;
                    case this.ram === null:
                        this.error = '内存'
                        break;
                    case this.color === null:
                        this.error = '颜色'
                        break;
                    case this.imeiShow && !this.imei:
                        this.error = 'IMEI'
                        break;
                }
                return this.error
            }
        },
        methods: {
            showImeiTip: function () {
                this.imeiMaskShow = true
            },
            closeImeiTip: function () {
                this.imeiMaskShow = false
            },
            cancleCamera: function () {
                this.cameraShow = false;
            },
            useCamera: function () {
                this.cameraShow = true
            },
            //合并对象
            mergeObj: function (target, source) {
                for (var obj in source) {
                    target[obj] = source[obj];
                }
                return target;
            },
            //提交信息
            submit: function (cb) {
                if (this.check) {
                    alert('请填写' + this.error + '信息')
                    return false;
                }
                var data = {
                    "brand": this.product[this.brand].brand,
                    "type": this.typeArray[this.type].type,
                    "name": this.nameArray[this.name].name,
                    "memory": this.ramArray[this.ram].ram,
                    "color": this.colorArray[this.color],
                }
				
				//如果有IMEI信息，则提交时应该将该信息一并提交
                data = this.imei ? this.mergeObj(data, {'IMEI': this.imei}) : data;
                var that = this
                //防重复提交
                if(that.submitFlag) {
                    that.submitFlag = false
                    $.ajax({
                        url: path + '/abc/check',
                        type: 'post',
                        //后端要求传这样的数据格式
                        data: {'info': JSON.stringify(data)},
                        success: function (res) {
                        	//提交成功的回调函数
                            cb && cb()
                            that.submitFlag = true
                        },
                        error: function (error) {
                            that.submitFlag = true
                            alert('请求失败')
                        }
                    })
                    that.submitFlag = false
                }
            }
        }
    })