| vue实现三级联动，多级联动 | 您所在的位置：网站首页 › 前端多级联动下拉菜单没反应 › vue实现三级联动，多级联动 |
vue实现三级联动，多级联动
|
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部分： 选择品牌 请选择 {{item.brand}} 产品类型 请选择 {{item.type}} 产品名称 请选择 {{item.name}} 内存 请选择 {{item.ram}} 颜色 请选择 {{item}} IMEI码
提交信息
多级联动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 } } } }) 点击这里尝试运行效果！ |
【本文地址】
公司简介
联系我们