第一步先写布局:

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

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. 自动化运维:使用Maven与Docker运行Selenium测试

    在这篇文章中,我们将向您展示如何创建交付流水线并实现以下目标: 使用Web应用程序构建Docker镜像 在Docker容器中运行该应用程序 从不同的容器中使用Maven运行Selenium测试 出于本 ...

  2. C# 学习async/await(个人理解)

    await : 等待的意思 async:异步(非同步) 当我们方法内部   存在await的时候,就返回出去 执行下一步 ,等await后面的方法执行完毕 在执行await下面的方法 一.我们先看正常 ...

  3. 树莓派开机启动VNC

    sudo nano /etc/init.d/vncserver #!/bin/sh ### BEGIN INIT INFO # Provides: vncserver # Required-Start ...

  4. Zstack使用经验系列2-安装的存储配置

    从上图读者应该能看出当初分配主存储和镜像存储时空间分配的是多么不合理,镜像空间不需要那么多.不过这时系统已经运行了近1年,很多云主机以及系统服务都搭好了,如果再重新分配空间是多么的麻烦! 所以开始为p ...

  5. Layui 表单元素考到页面样式不生效

    表单元素必须要标记在表单里面(calss="layui-form") 例如: <div class="layui-form"> <input ...

  6. k8s(docker-desktop)简单搭建zookeeper三节点集群

    前提 已经安装了docker-desktop,并且其中的kubernetes启动运行的.或者安装了k8s环境就行 可以正常下载dockerhub的镜像,这里采用了dockerhub官方制作的镜像 启动 ...

  7. ASP判断一个字符是否为汉字的两种方法

    有的时候我们要求用户一定要输入汉字的信息,比如姓名和地址.那么,如何判断一个字符是不是汉字呢?其实在asp中至少有两种方法: 一.直接将某字符用asc转为ascii码,如果是英文,他应该是0-127的 ...

  8. 个人常用的git提交代码流程

    # 增加⼀一个新的远程仓库,并命名git remote add [shortname] [url] # 新建一个本地目录,将其初始化为 Git 代码库$ git init [project-name] ...

  9. .NET6+WebApi+Vue 前后端分离后台管理系统(一)

    概述 项目是用的 NET6 webapi搭建一个前后端分离的后端管理框架,项目分为:表示层.业务层.数据访问层.数据存储层. Common:公共组件层,存放一些公共的方法.Model:实体Model数 ...

  10. 97、UserAgentUtils

    user-agent-utils 是一个用来解析 User-Agent 字符串的 Java 类库. 其能够识别的内容包括: 超过150种不同的浏览器: 7种不同的浏览器类型: 超过60种不同的操作系统 ...