位置: IT常识 - 正文

antd级联选择器(a-cascader)动态加载和动态回显效果实现(antd 级联多选)

编辑:rootadmin
antd级联选择器(a-cascader)动态加载和动态回显效果实现 文章目录1、介绍2、效果图如下图所示:(只实现3层的)3、实现方法(1)层级可单独选择(2)组件使用(3)data数据(4)实现动态加载数据1、 提示:options的数据格式是这样的2、methods方法3、异步加载数据方法4、获取2,3级组织列表(5)编辑回显1、介绍

推荐整理分享antd级联选择器(a-cascader)动态加载和动态回显效果实现(antd 级联多选),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:级联选择器多选,antd级联选择器回显,antd级联选择器获取选中值对象,antd级联选择器多选,antd级联选择器获取选中值对象,antd级联选择器获取选中值对象,antd级联选择器 多选限制数量,antd级联选择器获取选中值对象,内容如对您有帮助,希望把文章链接给更多的朋友!

​ 需要实现级联选择器动态拿到每一层级的数据并显示,同时在编辑数据时弹框回显对应的层级关系。

2、效果图如下图所示:(只实现3层的)

3、实现方法(1)层级可单独选择antd级联选择器(a-cascader)动态加载和动态回显效果实现(antd 级联多选)

​ 给组件添加 :checkStrictly="true" 这个属性就可以实现单独勾选一级、二级、三级组织关系。(官方api没有写)

(2)组件使用

​ 首先先在html里 模态框上写上a-cascader组件

<a-modal v-model="uploadNew" :title="title" :width="800" :footer="null" @cancel="resetForm"> <a-form-model :model="addForm" :label-col="labelCol" :wrapper-col="wrapperCol" ref="addForm" :rules="roleRules"> <a-form-model-item label="所属组织" prop="orgIds"> <a-cascader v-model="addForm['orgIds']" :options="options" change-on-select @change="onChange" :load-data="loadData" :checkStrictly="true" placeholder="选择组织" /> </a-form-model-item> <a-form-model-item :wrapper-col="{ span: 14, offset: 10 }"> <span @click="onSubmit" style="cursor: pointer"> 提交 </span> <span @click="resetForm" style="margin-left: 100px;cursor: pointer"> 取消 </span> </a-form-model-item> </a-form-model> </a-modal>(3)data数据 data() { return { options: [] } },(4)实现动态加载数据

​ 先实现只有动态加载数据的功能(根据官网https://1x.antdv.com/components/cascader-cn/示例即可实现)

1、 提示:options的数据格式是这样的 options: [ { value: 'zhejiang', label: 'Zhejiang', isLeaf: false,//是否叶子节点 children:[] }, { value: 'jiangsu', label: 'Jiangsu', isLeaf: false, }, ],2、methods方法

注意:(初始化时会先获取第一层级的数据)

//获取一级组织 async getOneList(){ try { let par={ parentId:'' } const res = await getOrgOneList(par) this.roleOneList=res.data.data this.roleOneList.forEach(item=>{ let temp={ value:item.id, label:item.orgName, isLeaf:false, } this.options.push(temp) }) } catch (error) { console.log(error) } }, 3、异步加载数据方法 async loadData(selectedOptions) { const targetOption = selectedOptions[selectedOptions.length - 1]; this.levelIndex=selectedOptions.length+1 //点第几级组织,selectedOptions长度就是几,点3级时,没有叶子节点,不会进入这个方法(这里只会等于2,3) targetOption.loading = true; let parentId=targetOption.value//根据父id才能查询子数组 await this.getOrgTwoList(parentId)//这个方法是掉接口,返回2,3级数据,下方有该方法 targetOption.loading = false; if(this.levelIndex<=3){ targetOption.children = this.roleTwoList } this.options = [...this.options]; }, onChange(value) { this.roleCheck=value console.log(value,'sel') },4、获取2,3级组织列表//根据父id获取2,3级组织列表 async getOrgTwoList(id){ try { let par={ parentId:id } const res = await getOrgOneList(par)//掉接口,获取下一层级数据 this.roleTwoList=[] res.data.data.forEach(item=>{ let temp={ value:item.id, label:item.orgName, isLeaf: this.levelIndex==3?true:false//判断是否是叶子节点 } this.roleTwoList.push(temp) }) } catch (error) { console.log(error) } },(5)编辑回显

在上面基础上,实现编辑的时候数据回显

//编辑用户 async editUser(row){ this.addForm=Object.assign({},row) this.addForm.orgIds=row.orgIds.split(',')//数据需要转成数组的格式 for (let i = 0; i < this.addForm.orgIds.length - 1; i++) { await this.getNextList(this.addForm.orgIds[i])//获取下一层级的数据 } this.uploadNew=true//显示弹框 },

方法实现

//根据父id获取下一层级数据 async getNextList (targetOption) { let obj = { parentId: targetOption } const res = await getOrgOneList(obj)//掉接口,获取下一层级数据 const list = res.data.data.map((item) => { // dLevel == 3 时表示是叶子节点 this.$set(item,'isLeaf',item.dLevel == 3) this.$set(item,'value',item.id) this.$set(item,'label',item.orgName) return item }) //初始化时,this.options包含全部第一层级的数据 this.options.forEach((item) => { if (item.children) { item.children.forEach((ite) => { if (ite.value == targetOption ) { this.$set(ite,'children',list) // ite['children'] = list } }) } if (item.value == targetOption) {//数据value值等于父id this.$set(item,'children',list) } }) this.options = [...this.options] },

以上getOrgTwoList和getNextList方法都是根据父id获取下一层级(2,3级)数据,可优化。

本文链接地址:https://www.jiuchutong.com/zhishi/283076.html 转载请保留说明!

上一篇:户外广告位租用费如何在税前扣除?(户外广告位怎么收费)

下一篇:牙痛怎么办,怎么快速止痛(牙痛怎么办怎么治疗)

  • 华为荣耀20青春版是双系统吗(华为荣耀20青春版上市时间和价格)

    华为荣耀20青春版是双系统吗(华为荣耀20青春版上市时间和价格)

  • 荣耀9x升降屏是什么意思(荣耀九x升降式摄像头怎么开启)

    荣耀9x升降屏是什么意思(荣耀九x升降式摄像头怎么开启)

  • 华为荣耀4c怎么分屏(华为荣耀4c怎么下载QQ)

    华为荣耀4c怎么分屏(华为荣耀4c怎么下载QQ)

  • iphone照片水印显示手机型号(iphone照片水印显示日期)

    iphone照片水印显示手机型号(iphone照片水印显示日期)

  • 笔记本电脑返回键是哪个(笔记本电脑返回上一步)

    笔记本电脑返回键是哪个(笔记本电脑返回上一步)

  • 网易云音乐怎么取消收藏歌单(网易云音乐怎么转换成mp3格式)

    网易云音乐怎么取消收藏歌单(网易云音乐怎么转换成mp3格式)

  • 分辨率h265是什么意思(h265分辨率码率对应表)

    分辨率h265是什么意思(h265分辨率码率对应表)

  •  淘宝搜索发现怎么删除(淘宝搜索发现和历史搜索)

    淘宝搜索发现怎么删除(淘宝搜索发现和历史搜索)

  • 腾讯会议听不到自己的声音(腾讯会议听不到声音怎么回事)

    腾讯会议听不到自己的声音(腾讯会议听不到声音怎么回事)

  • 苹果11看朋友圈视频卡是什么原因(苹果11看朋友圈里的图片需要缓冲,视频就不用)

    苹果11看朋友圈视频卡是什么原因(苹果11看朋友圈里的图片需要缓冲,视频就不用)

  • 苹果7按键震动有嘎嘣声(苹果7按键震动在哪调)

    苹果7按键震动有嘎嘣声(苹果7按键震动在哪调)

  • 抖音扫二维码在哪里扫呀(抖音扫一扫怎么操作)

    抖音扫二维码在哪里扫呀(抖音扫一扫怎么操作)

  • 怎么卸载ipad上的软件(怎么卸载ipad上的软件保留数据)

    怎么卸载ipad上的软件(怎么卸载ipad上的软件保留数据)

  • html标题居中怎么设置(html如何让文字居中)

    html标题居中怎么设置(html如何让文字居中)

  • Reno Ace怎么添加桌面插件(reno ace2 nfc)

    Reno Ace怎么添加桌面插件(reno ace2 nfc)

  • 苹果18w快充多久可以充满(苹果18w快充多久可以充满苹果8)

    苹果18w快充多久可以充满(苹果18w快充多久可以充满苹果8)

  • 拼多多账户在哪里(拼多多账户在哪里退出)

    拼多多账户在哪里(拼多多账户在哪里退出)

  • 数据库英文缩写(数据库英文缩写DBA代表什么)

    数据库英文缩写(数据库英文缩写DBA代表什么)

  • 微博怎么发长文(微博怎么发长文字)

    微博怎么发长文(微博怎么发长文字)

  • 快手在动态中隐藏我的信息是什么意思(快手在动态中隐藏我的赞和关注)

    快手在动态中隐藏我的信息是什么意思(快手在动态中隐藏我的赞和关注)

  • 火山直播没声音怎么弄(火山直播没声音怎么设置)

    火山直播没声音怎么弄(火山直播没声音怎么设置)

  • win10平板模式怎么用(win10平板模式怎么显示桌面)

    win10平板模式怎么用(win10平板模式怎么显示桌面)

  • uniapp常见兼容性问题(uniapp多端兼容)

    uniapp常见兼容性问题(uniapp多端兼容)

  • 增值税发票能不能报销
  • 什么是增值税征免年限
  • 企业法人网上可以注销吗
  • 票面3个点的增值税发票是交几个点的税金
  • 红字发票没有地址和银行信息跨月了无法作废
  • 生产部门领用低值易耗品,实际成本
  • 代理记账公司收费项目
  • 销售退货时发票已认证怎么办
  • 融资租赁方式租出的固定资产
  • 汽车销售公司购进车辆怎么做账
  • 签订设备维修合同会计分录
  • 企业拿到产权证后是否还需要缴纳土地使用税呢?
  • 地税开发票为啥要交百分之二的企业所得税?
  • 加油票不打公司会怎么样
  • 电子发票有发票代码吗
  • 债务免除的税务处理
  • 利润分配需要缴纳企业所得税吗
  • 电子发票字体不同
  • 个体工商户做账可以做工资吗
  • 自然人股权转让要交什么税
  • win11 zen2
  • 研发费用计入什么科目符合资本化
  • 待认证进项税额借方余额表示什么
  • 无形资产原值增加,净值减少的原因
  • 公司用车年检
  • 印花税滞纳金应计入什么
  • 增值税要不要计入固定资产的成本中?
  • 非居民个人所得税税率表最新
  • 应交税金年末
  • scanserver.exe - scanserver是什么进程 有什么用
  • php数字转换大写
  • PHP:pg_query_params()的用法_PostgreSQL函数
  • 财务费用属于期间汇转账户吗
  • php fileinfo
  • 债券溢折价是什么意思
  • 鸟瞰画面
  • 前端项目部署到nginx
  • 元宇宙产业链
  • 低值易耗品报废年限几年
  • 自制半成品属于原材料还是库存商品
  • 公司逾期交税,后期补上有何后果
  • 航天信息服务费的会计分录
  • 挂预收账款怎么处理
  • 其他应付款的会计编码
  • 个人所得税专项扣除2023最新政策
  • CMS不要让MySQL为你流泪
  • 企业享受政府补贴的具体方式
  • 核定征收和查账征收可以自己选择吗
  • 装饰公司购入材料税额会计分录
  • 非限定性净资产和限定性净资产的区别
  • 临时工工资会计凭证
  • 跨月发票红冲怎么做账务处理
  • 企业年底亏损怎么结转
  • 价格调节基金费率
  • 公司租用员工车辆维修费能报销吗
  • 企业受赠资产会计处理
  • 弱电系统可以入户门吗
  • 摊销方法如何选择
  • 帮员工代缴社保分录怎么办
  • sql server默认实例
  • sql servererror40
  • sql 截取字符串某个字符之后
  • vista loader
  • win10的win+tab
  • ubuntu下的vivado2022怎么打开
  • linux查看文件夹大小
  • ubuntu怎么设置成中文
  • 服务win10
  • win8 系统设置
  • 如何使用调制解调器
  • windows免费升级win10
  • win10输入法设置快捷键
  • nodeJS文件操作自动创建目录
  • js css函数
  • 用vue做项目加入购物车是怎么做到的
  • jquery中选择器分为哪三种
  • jquery图片轮播插件slick不动
  • 松原江北小吃一条街
  • 2020年南通居民医保缴费标准
  • 湖北低保查询网站官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设