第一步先写布局:

 然后写我们的二级联动的方法

getOptionsA() {
this.$axios
.get('http://localhost:55629/api/GetClassifies?pid=0')
.then((res) => {
this.optionsA = res.data
})
},
getOptionsB(value) {
//给第一级ID 赋值
this.resetForm.CIdA = value[0]
this.$axios
.get(`http://localhost:55629/api/GetClassifies?pid=${value[0]}`)
.then((res) => {
this.optionsB = res.data
})
},

在页面中绑定对应的字段

 <el-cascader-panel :options="optionsA"
:props="{ value: 'CId', label: 'CName' }"
ref="optA"
@change="getOptionsB"></el-cascader-panel>

在Element中,props可以用来接收,它的value属性绑定对应的主键ID,label属性绑定要显示的字段、

在我们写接下来的添加时

可以在框架上加上显示与否的属性

将它的默认值设为true

触发按钮之后将值设为false就可以显示添加的页面

 步骤条:

 if (this.active++ > 2) this.active = 0 //更新步骤条

详情页:

可以选择传id进行查找或者直接传一个对象

然后在详情页面进行接收,如果涉及下拉框的详情页面,就需要将传来的下拉框主键值转换为Number

    //反填图片
this.imageUrl = this.ruleForm.ImgPath //反填发类
this.ruleForm.BId = this.$route.query.BName
//反填商品分类
this.optAName = this.$route.query.CNameA
this.optBName = this.$route.query.CNameB

------以上操作都是基于Elment的框架下

vue二级联动 编辑的更多相关文章

  1. vue二级联动select

    <div> <span>所在区域</span> <select name="" v-model="country"&g ...

  2. vue实现二级联动效果

    你如城市与省份间的二级联动效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  3. 七、xadmin 编辑界面实现二级联动

    很多时候,我们会遇到这种需求,通过一个select框中选择的值,去动态的加载另一个下拉框中的内容 对于前端的同学来讲,这个本应该是一个很简单的需求,获取第一个下拉框的值然后通过ajax去动态加载即可. ...

  4. iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装

    之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...

  5. asp.net 使用DroDownList来实现二级联动

    今天做新闻发布系统的时候,用到了二级联动,我把使用方法记录下来,以便日后查阅以及帮助新手朋友们.下面是效果图: 下面来讲解一下实现的方法: 1.在.aspx页面中,拖入两个DroDownList控件. ...

  6. Select标签下拉列表二级联动级联

    首先从服务器端,绑定下拉列表,二级下拉的text命名按照一定规则加上一级下拉的ID. var options=new Array(); $(document).ready(function(){ // ...

  7. 通过Ajax异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)

    之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题 第一种方法是xml方法 1 ...

  8. 利用JavaScript来实现省份—市县的二级联动

    所谓省-市二级联动是指当选择省份下拉选择框时,市县的下拉框会根据选择的省市而有相应的市县加载出来,如下图所示选择"上海市",城市的下拉选择框只会出现上海的市县: 这种二级联动非常常 ...

  9. 省市二级联动(原生JS)

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  10. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

随机推荐

  1. Monkey 命令

    1) 参数:  -p 参数-p用于约束限制,用此参数指定一个或多个包(Package,即App).指定 包之后,Monkey将只允许系统启动指定的APP.如果不指定包,Monkey将允许系统启动设备中 ...

  2. GitLab CI-CD 学习笔记

    概述 1. CI/CD CI(持续集成)指开发人员一天内进行多次合并和提交代码操作,并通过自动化测试,完成构建 CD(持续部署)指每次代码更改都会自动部署到对应环境 CI/CD 结合在一起,可以加快开 ...

  3. @EnableDiscoveryClient和@EnableEurekaClient springboot3.x

    @EnableDiscoveryClient和@EnableEurekaClient 将一个微服务注册到Eureka Server(或其他服务发现组件,例如Zookeeper.Consul等)的步骤 ...

  4. C语言补漏--内存管理-完结

    1.内存分布 2.内存操作函数 数组清空 2. 内存拷贝函数 数组拷贝 3.内存对比 总结 堆区开辟 内存泄漏只申请不释放,导致内存空间持续增长,导致推出 内存污染向没有申请的内存空间写数据  向堆区 ...

  5. 推荐一款新的自动化测试框架:DrissionPage!

    今天给大家推荐一款基于Python的网页自动化工具:DrissionPage.这款工具既能控制浏览器,也能收发数据包,甚至能把两者合而为一,简单来说:集合了WEB浏览器自动化的便利性和 request ...

  6. LG P2633 Count on a tree

    \(\text{Solution}\) 树上主席树板子 \(\text{Code}\) #include <cstdio> #include <algorithm> #defi ...

  7. 主流的第三方直播SDK对比(腾讯云、即构、阿里云、声网、网易云信、网宿)

    直播业务概述 大家所熟知的直播平台虎牙.斗鱼.快手.抖音.B站,直播功能看似普遍,但从零到一开发却不简单.直播中运用到的技术难点非常之多,音频视频处理/编解码,前后处理,直播分发,即时通讯等技术,学好 ...

  8. 第24周SDAI缓解能否预测远期RA骨破坏受抑制

    第24周SDAI缓解能否预测远期RA骨破坏受抑制 Hirano F, et al. EULAR 2015. Present ID:THU0085. 原文 译文 THU0085 SDAI REMISSI ...

  9. C#/JS 压缩到指定大小的图片 (内存不足问题修改)

    //因为浏览器安全问题,无法获取上传图片地址,需要先存一遍然后再获取地址作参数上传 var des = CompressImage(@"C:\Users\PC\Pictures\测试\165 ...

  10. vue-element-admin 怎么改后端 可以调跳过登录并且发送接口请求

    1.找到根目录的 vue.config.js 添加 proxy 内容 注释掉mock 2.清空 .env.development 里的 VUE_APP_BASE_API  路径 3.user.js 方 ...