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 = truealert('请求失败')}})that.submitFlag = false}}}})

点击这里尝试运行效果！

vue实现三级联动，多级联动相关推荐

二级联动三级联动多级联动无限级联动下拉列表或菜单专题
二级联动三级联动多级联动无限级联动下拉列表或菜单专题三维数组数据源 A - 请选择 -北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南 ...
vue实现下拉二级联动_Vue实现三级联动/多级联动/城市选择
我网上搜了一圈,发现没什么具体教程,所以我出一个详细点的教程吧重点是要找到思路,其实不难的.估计也是因为不难所以网上才没具体教程的吧效果图.png 准备一串Json的数据 json数据就是对象格式 ...
ajax实现多级联动菜单,jquery 实现二级/三级/多级联动菜单的思路及代码
本文介绍使用jquery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级.三级或多级联动也可以按照此方法完成. 文章中涉及到的数据表为City,为方便管理. 设计此表如下 ID:自增 ...
多级联动（三级联动）
多级联动原理选中顶级分类,查询出顶级分类对应的二级分类至下啦菜单,选择出二级类,查询出二级分类对应的三级分类,这个效果就是多级联动原始实现思路 1.定义路由 2.查询顶级分类(pid=0) 发送 ...
vue基于element-ui的Select选择器实现的动态多级联动下拉选择
本文讲的是 vue基于 element-ui 的 Select选择器实现的动态多级联动下拉选择基于原生select标签实现请看我的另外一篇文章 vue实现动态多级联动选择本文demo地址代码如 ...
vue 学科年级学段多级联动需求跨组件如何监听如何解决vue-communicatio监听多个参数的问题以及vue-communicatio的注意事项
最近的项目中有这么一个需求先解释一下需求顶部是一个多级联动的组件,用来选择学段,年级和科目,同时左侧的教材和知识点的树形结构受到顶部三个字段的影响,随之变动而变动顶部的联动解决方案是使用 wat ...
uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数支持无限级注意事项:插件传入数据格式为children树 ...
多级联动下拉菜单插件：jquery.cxselect.js
话说这个插件,我也用了挺久了,但一直对其具体的作用不是很懂,只知道可以利用 ajax来请求数据,实现类似于多级联动的效果.后来百度了下,在此做个总结吧. 下面是以一名php程序员的角度来分析的...可 ...
native封装卡片 react_自己动手封装一个React Native多级联动
背景肯定是最近有一个项目,需要一个二级联动功能了! 本来想封装完整之后,放在github上面赚星星,但发现市面上已经有比较成熟的了,为什么我在开发之前没去搜索一下(项目很赶进度),泪崩啊,既然已经封 ...

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

点击这里尝试运行效果！

vue实现三级联动，多级联动相关推荐

最新文章

热门文章