vue 下拉框三级联动,js下拉框联动

　　在前端开发中，级联选择框是经常用到的，这样不仅可以增加用户输入的友好性，还能减少前后端交互的数据量。本文就介绍一下使用某视频剪辑软件实现级联下拉框，感兴趣的可以了解一下

1.数据库设计

　　所有的相关数据皆可存在一张表中，这样数据就可以不受层级的限制。

　　表结构可以参考如下建表SQL:

　　创建表`耗材_类型`(

　　` id int(11)NOT NULL AUTO _ INCREMENT，

　　` category _ type ` varchar(64)不为空注释类别种类：大类、中类、小类，

　　` big _ category _ name ` varchar(64)不为空注释大类名称，

　　` middle _ category _ name ` varchar(64)默认空注释中类名称，

　　` small_category_name` varchar(64)默认空注释小类名称，

　　` parent_id` int(11)默认为空，

　　“创建时间”时间戳为空默认当前时间戳，

　　` create_user_name` varchar(64)默认空注释创建人用户名，

　　`更新时间时间戳空更新当前时间戳时默认为空，

　　` is_deleted` tinyint(1)默认 0 注释是否删除，1表示已删除，

　　主键(` id `)

　　)ENGINE=InnoDB AUTO_INCREMENT=1默认CHARSET=utf8mb4

　　数据库截图如下图所示，注：本系统为了减少查询次数，故冗余了一些字段，读者可根据自己的需求调整。

　　核心设计在于家长id根据家长编号字段即可查询到子类，结果如下图所示：

2.前端页面

　　前端页面效果如下：

　　超文本标记语言代码如下：

　　div class=应用程序容器

　　span style=margin-left:120px .右边距：20px宽度：150像素显示：内嵌块；大类：/span

　　El-select v-model= big placeholder=请选择@ change= getSuppliesType(big) style= width:19%；

　　埃尔选项

　　v-for= bigTypes中的项目

　　:key=item.bigCategoryName

　　:label=item.bigCategoryName

　　:value=item.id

　　/el选项

　　/el-select

　　span style=margin-left:120px .右边距：20px宽度：150像素显示：内嵌块；中类：/span

　　El-select v-model= middle placeholder=请选择@ change= getSuppliesType(middle) style= width:19%；

　　埃尔选项

　　v-for=中间类型中的项目

　　:key=item.middleCategoryName

　　:label=item.middleCategoryName

　　:value=item.id

　　/el选项

　　/el-select

　　英国铁路公司

　　span style=margin-left:120px .右边距：20px宽度：150像素边距-顶部：20px 显示：内嵌块；小类：/span

　　El-select v-model= small placeholder=请选择style= width:19%；

　　埃尔选项

　　v-for=小型类型中的项目

　　:key=item.smallCategoryName

　　:label=item.smallCategoryName

　　:value=item.id

　　/el选项

　　/el-select

　　/div

　　上面的item.smallCategoryName、item.smallCategoryName数据为后端从数据库中查询出来的数据（驼峰命名),后端只负责查询、并返回结果。

　　某视频剪辑软件中数据定义如下：

　　data() {

　　返回{

　　大： ,

　　bigTypes: null，

　　中间： ,

　　中间类型：空，

　　小："",

　　小型类型：空

　　}

　　在页面初始化时，自动获取大类列表：

　　已创建(){

　　this.getSuppliesType(0)

　　页面中的getSuppliesType方法如下：

　　getSuppliesType(id) {

　　this.listLoading=true

　　const queryData={

　　parentId: id

　　}

　　//此处的调用后端接口按照自己的调用方式写即可

　　//此处的getSuppliersType是项目中自己封装的跑龙套中的方法

　　//如果请求方式是post，JSON.stringify(queryData)

　　//如果请求方式是get，queryData

　　getSuppliersType(JSON。stringify(查询数据).然后(响应={

　　console.log(响应)

　　console.log(response.data[0]).类别类型)

　　//根据类型自动向三个下拉框赋值

　　if (response.data[0]).categoryType===BIG) {

　　this.bigTypes=response.data

　　} else if (response.data[0]).categoryType===MIDDLE) {

　　this.middleTypes=response.data

　　}否则{

　　this.smallTypes=response.data

　　}

　　this.listLoading=false

　　}).接住(函数（错误){

　　console.log(错误)

　　this.listLoading=false

　　})

3.一个完整的demo

　　下面这个页面为完成代码，其中的数据为部分数据，后台接口获取使用射流研究…来完成。

　　模板

　　div class=应用程序容器

　　span style=margin-left:120px .右边距：20px宽度：150像素显示：内嵌块；大类：/span

　　El-select v-model= big placeholder=请选择@ change= getSuppliesType(big) style= width:19%；

　　埃尔选项

　　v-for= bigTypes中的项目

　　:key=item.bigCategoryName

　　:label=item.bigCategoryName

　　:value=item.id

　　/el选项

　　/el-select

　　span style=margin-left:120px .右边距：20px宽度：150像素显示：内嵌块；中类：/span

　　El-select v-model= middle placeholder=请选择@ change= getSuppliesType(middle) style= width:19%；

　　埃尔选项

　　v-for=中间类型中的项目

　　:key=item.middleCategoryName

　　:label=item.middleCategoryName

　　:value=item.id

　　/el选项

　　/el-select

　　英国铁路公司

　　span style=margin-left:120px .右边距：20px宽度：150像素边距-顶部：20px 显示：内嵌块；小类：/span

　　El-select v-model= small placeholder=请选择style= width:19%；

　　埃尔选项

　　v-for=小型类型中的项目

　　:key=item.smallCategoryName

　　:label=item.smallCategoryName

　　:value=item.id

　　/el选项

　　/el-select

　　英国铁路公司

　　El-button type= primary round style= margin-left:280 px @ click。本地人。防止=提交添加/el-button

　　El-button type= primary round style= margin-left:100px @ click。本地人。防止=取消取消/el-button

　　/div

　　/模板

　　脚本

　　导出默认值{

　　过滤器：{

　　解析时间(时间戳){

　　返回解析时间（时间戳，空)

　　}

　　data() {

　　返回{

　　大： ,

　　bigTypes: null，

　　中间： ,

　　中间类型：空，

　　小："",

　　小类型：空，

　　数据列表：[

　　{id:1， categoryType:BIG ， bigCategoryName:1 .现场管理与保障， middleCategoryName:null， smallCategoryName:null， parentId:0， create time : 2021-07-04t 11:13:36.000 0000 ， createUserName:null， update time : 2021-07-04t 13:34:31.000 0000 ， isDeleted:false}，

　　{id:27， categoryType:BIG ， bigCategoryName:2 .生命救援与生活救助， middleCategoryName:null， smallCategoryName:null， parentId:0， create time : 2021-07-04t 11:13:36.000 0000 ， createUserName:null， updateTime:null， isDeleted:false}，

　　{"id":2，"类别类型":"中间"，" bigCategoryName":"1 .现场管理与保障， middleCategoryName:1.1现场监测， smallCategoryName:null， parentId:1， create time : 2021-07-04t 11:13:36.000 0000 ， createUserName:null， updateTime:null， isDeleted:false}，

　　{"id":10，"类别类型":"中间"，" bigCategoryName":"1 .现场管理与保障， middleCategoryName:1.2现场安全， smallCategoryName:null， parentId:1， create time : 2021-07-04t 11:13:36.000 0000 ， createUserName:null， updateTime:null， isDeleted:false}，

　　{id:3， categoryType:SMALL ， bigCategoryName:1 .现场管理与保障， middleCategoryName:1.1现场监测，小类别名称: 1.1.1气象监测， parentId:2，创建时间: 2021-07-04t 11:13:36.000 0000 ， createUserName:null， updateTime:null， isDeleted:false}，

　　{id:4， categoryType:SMALL ， bigCategoryName:1 .现场管理与保障“中间类别名称”:1.1现场监测“小类别名称”:1。1 .2 .小类别名称地震监测 parentId:2，创建时间:2021-07-04 t11:13:36，000 0000 ， createUserName:null， updateTime:null， isdeleted }，

　　{id:5， categoryType:SMALL ， bigCategoryName:1 .现场管理与保障“中间类别名称”:1.1现场监测“小类别名称”:1。1 .3 .小类别名称地质灾害监测 parentId:2，创建时间:2021-07-04 t11:13:36，000 0000 ， createUserName:null， updateTime:null， isdeleted }，

　　{id:6， categoryType:SMALL ， bigCategoryName:1 .现场管理与保障“中间类别名称”:1.1现场监测“小类别名称”:1。1 .4 .小类别名称水文监测 parentId:2，创建时间:2021-07-04 t11:13:36，000 0000 ， createUserName:null， updateTime:null， isdeleted }，

　　{id:7， categoryType:SMALL ， bigCategoryName:1 .现场管理与保障“中间类别名称”:1.1现场监测“小类别名称”:1。1 .5 .小类别名称环境监测 parentId:2，创建时间:2021-07-04 t11:13:36，000 0000 ， createUserName:null， updateTime:null， isdeleted }，

　　{id:8， categoryType:SMALL ， bigCategoryName:1 .现场管理与保障“中间类别名称”:1.1现场监测“小类别名称”:1。1 .6 .小类别名称疫病监测 parentId:2，创建时间:2021-07-04 t11:13:36，000 0000 ， createUserName:null， updateTime:null， isdeleted }，

　　{id:9， categoryType:SMALL ， bigCategoryName:1 .现场管理与保障“中间类别名称”:1.1现场监测“小类别名称”:1。1 .7 .小类别名称观察测量 parentId:2，创建时间:2021-07-04 t11:13:36，000 0000 ， createUserName:null， updateTime:null， isdeleted }，

　　{id:11， categoryType:SMALL ， bigCategoryName:1 .现场管理与保障“中间类别名称”:1.2现场安全“小类别名称”:1。2 .1 .小类别名称现场照明 parentId:10，创建时间:2021-07-04 t11:13:36，000 0000 ， createUserName:null， updateTime:null， isdeleted }，

　　{id:12， categoryType:SMALL ， bigCategoryName:1 .现场管理与保障“中间类别名称”:1.2现场安全“小类别名称”:1。2 .2 .2 .小类别名称现场警戒 parentId:10，创建时间:2021-07-04 t11:13:36，000 0000 ， createUserName:null， updateTime:null， isdeleted }，

　　{id:28， categoryType:MIDDLE ， bigCategoryName:2 .生命救援与生活救助“中间类别名称”:2.1人员安全防护 smallCategoryName:null， parentId:27， create time :2021-07-04 t11:13:36，000 0000 ， createUserName:null， updateTime:null， isdeleted }，

　　{id:34， categoryType:MIDDLE ， bigCategoryName:2 .生命救援与生活救助“中间类别名称”:2.2生命搜救与营救 smallCategoryName:null， parentId:27，创建时间:2021-07-04 t11:13:36，000 0000 ， createUserName:null，更新时间:2021-07-04 t13:03:23，000 0000 ， isDeleted ，

　　{id:29， categoryType:SMALL ， bigCategoryName:2 .生命救援与生活救助“中间类别名称”:2.1人员安全防护小类别名称:2。1 .1 .1 .小类别名称卫生防疫 parentId:28，创建时间:2021-07-04 t11:13:36，000 0000， createUserName:null， updateTime:null， isdeleted }，

　　{id:30， categoryType:SMALL ， bigCategoryName:2 .生命救援与生活救助“中间类别名称”:2.1人员安全防护小类别名称:2。1 .2 .小类别名称消防防护 parentId:28，创建时间:2021-07-04 t11:13:36，000 0000， createUserName:null， updateTime:null， isdeleted }，

　　{id:31， categoryType:SMALL ， bigCategoryName:2 .生命救援与生活救助“中间类别名称”:2.1人员安全防护小类别名称:2。1 .3 .小类别名称化学与放射 parentId:28，创建时间:2021-07-04 t11:13:36，000 0000， createUserName:null， updateTime:null， isdeleted }，

　　{id:32， categoryType:SMALL ， bigCategoryName:2 .生命救援与生活救助， middleCategoryName:2.1人员安全防护，小类别名称: 2.1.4防高空坠落， parentId:28，创建时间: 2021-07-04t 11:13:36.000 0000 ， createUserName:null， updateTime:null， isDeleted:false}，

　　{id:33， categoryType:SMALL ， bigCategoryName:2 .生命救援与生活救助， middleCategoryName:2.1人员安全防护，小类别名称: 2.1.5通用防护， parentId:28，创建时间: 2021-07-04t 11:13:36.000 0000 ， createUserName:null， updateTime:null， isDeleted:false}，

　　{id:35， categoryType:SMALL ， bigCategoryName:2 .生命救援与生活救助， middleCategoryName:2.2生命搜救与营救，小类别名称: 2.2.1生命搜索， parentId:34，创建时间: 2021-07-04t 11:13:36.000 0000 ， createUserName:null， updateTime:null， isDeleted:false}，

　　{id:36， categoryType:SMALL ， bigCategoryName:2 .生命救援与生活救助， middleCategoryName:2.2生命搜救与营救，小类别名称: 2.2.2攀岩营救， parentId:34，创建时间: 2021-07-04t 11:13:36.000 0000 ， createUserName:null， updateTime:null， isDeleted:false}，

　　{id:37， categoryType:SMALL ， bigCategoryName:2 .生命救援与生活救助， middleCategoryName:2.2生命搜救与营救，小类别名称: 2.2.3破拆起重， parentId:34，创建时间: 2021-07-04t 11:13:36.000 0000 ， createUserName:null， updateTime:null， isDeleted:false}，

　　{id:38， categoryType:SMALL ， bigCategoryName:2 .生命救援与生活救助， middleCategoryName:2.2生命搜救与营救，小类别名称: 2.2.4水下营救， parentId:34，创建时间: 2021-07-04t 11:13:36.000 0000 ， createUserName:null， updateTime:null， isDeleted:false}，

　　{id:39， categoryType:SMALL ， bigCategoryName:2 .生命救援与生活救助， middleCategoryName:2.2生命搜救与营救，小类别名称: 2.2.5通用工具， parentId:34，创建时间: 2021-07-04t 11:13:36.000 0000 ， createUserName:null， updateTime:null， isDeleted:false}

　　]

　　}

　　已创建(){

　　this.getSuppliesType(0)

　　方法：{

　　getSuppliesType(id) {

　　const queryData={

　　parentId: id

　　}

　　//此处为射流研究…模拟，真实数据的获取还需要后台接口的支持

　　getSuppliersType(JSON。stringify(查询数据).然后(响应={

　　console.log(响应)

　　console.log(response.data[0]).类别类型)

　　//存放此次查询结果

　　让tmpList=[]

　　this.dataList.forEach((item，index)={

　　if(item.parentId===id){

　　tmpList.push(项目)

　　}

　　})

　　if (tmpList[0]).categoryType===BIG) {

　　this.bigTypes=tmpList

　　} else if (response.data[0]).categoryType===MIDDLE) {

　　this.middleTypes=tmpList

　　}否则{

　　this.smallTypes=tmpList

　　}

　　}).接住(函数（错误){

　　console.log(错误)

　　})

　　提交(){

　　console.log(点击了提交按钮)

　　取消(){

　　这个. router.go(-1)

　　}

　　/脚本

　　又到了分隔线以下，本文到此就结束了，本文内容全部都是由博主自己进行整理并结合自身的理解进行总结

　　到此这篇关于某视频剪辑软件级联下拉框的设计与实现的文章就介绍到这了，更多相关某视频剪辑软件级联下拉框内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

vue 下拉框三级联动,js下拉框联动

目录

1.数据库设计

2.前端页面

3.一个完整的demo

相关文章阅读