位置: 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 转载请保留说明!

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

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

  • 网易云听歌次数在哪看(网易云听歌次数最多多少次)

    网易云听歌次数在哪看(网易云听歌次数最多多少次)

  • 电脑@怎么打上去(电脑怎么打上面的逗号)

    电脑@怎么打上去(电脑怎么打上面的逗号)

  • 华为如何限制应用下载(华为如何限制应用使用)

    华为如何限制应用下载(华为如何限制应用使用)

  • 数据线必须弯着才充电(数据线必须弯着才充电是啥坏了)

    数据线必须弯着才充电(数据线必须弯着才充电是啥坏了)

  • 华为如何删除应用软件(华为怎样删除应用程序)

    华为如何删除应用软件(华为怎样删除应用程序)

  • 抖音评论区背景颜色怎么调(抖音评论区背景是黑的)

    抖音评论区背景颜色怎么调(抖音评论区背景是黑的)

  • 华为后盖碎了有影响吗(华为后盖碎了有必要换吗多少钱)

    华为后盖碎了有影响吗(华为后盖碎了有必要换吗多少钱)

  • 华为手机太卡怎么办(华为手机太卡怎么回事)

    华为手机太卡怎么办(华为手机太卡怎么回事)

  • iphone11描述文件与设备管理不见了(iphone11描述文件与设备管理在哪)

    iphone11描述文件与设备管理不见了(iphone11描述文件与设备管理在哪)

  • 电脑复位键在什么位置(电脑复位键在什么位置台式)

    电脑复位键在什么位置(电脑复位键在什么位置台式)

  • 苹果11电池能用多长时间(苹果11电池能用一天吗)

    苹果11电池能用多长时间(苹果11电池能用一天吗)

  • word的退出方式有哪些(word退出方法有几种?详细说明)

    word的退出方式有哪些(word退出方法有几种?详细说明)

  • q/yj0003s是什么标准(q/yj0003s是什么意思)

    q/yj0003s是什么标准(q/yj0003s是什么意思)

  • 手机怎样删除锁屏壁纸(手机怎样删除锁屏密码忘了)

    手机怎样删除锁屏壁纸(手机怎样删除锁屏密码忘了)

  • word文档字打不上去(word文档字打不出来空白)

    word文档字打不上去(word文档字打不出来空白)

  • 半开有多大(半开是多少)

    半开有多大(半开是多少)

  • 在tt付款方式下单据是通过什么传递的(tt付款怎么操作)

    在tt付款方式下单据是通过什么传递的(tt付款怎么操作)

  • 联调是什么意思(接口联调是什么意思)

    联调是什么意思(接口联调是什么意思)

  • ios13怎么改微信通知声音(ios13.7怎么改微信提示音)

    ios13怎么改微信通知声音(ios13.7怎么改微信提示音)

  • 有哪些值得推荐的电脑录屏软件与手机录屏软件??(坤沙酒有哪些值得推荐)

    有哪些值得推荐的电脑录屏软件与手机录屏软件??(坤沙酒有哪些值得推荐)

  • 快手怎么有直播权限(快手怎么有直播功能)

    快手怎么有直播权限(快手怎么有直播功能)

  • udp是什么协议(icmp是什么协议)

    udp是什么协议(icmp是什么协议)

  • linux(阿里云ECS)使用Xshell连接服务器(linux 阿里云源)

    linux(阿里云ECS)使用Xshell连接服务器(linux 阿里云源)

  • 最早的拍照手机是什么(最早的拍照手机是哪一年)

    最早的拍照手机是什么(最早的拍照手机是哪一年)

  • RGB-T追踪——【多模态融合】Visible-Thermal UAV Tracking: A Large-Scale Benchmark and New Baseline(rgbt目标跟踪)

    RGB-T追踪——【多模态融合】Visible-Thermal UAV Tracking: A Large-Scale Benchmark and New Baseline(rgbt目标跟踪)

  • 实收资本印花税最新规定
  • 外轮供应公司远洋运输供应公司的退税申报?
  • 境外代扣代缴增值税
  • 酒店摆放物品是什么
  • 去年工资计提错误,今年如何修改
  • 工程产值是怎么计算的
  • 先报税还是先清卡反写
  • 应税服务增值税抵免
  • 采购设备包含安装费用吗
  • 库存现金余额过大的定性
  • 收到跨年的票据怎么做账
  • 长期待摊费用摊出来钱去哪里了
  • 什么情况下需要写答
  • 最新个人独资企业
  • 公司有出账没有进账怎么办
  • 公司租赁厂房开几个点发票
  • 地税印花税税率是多少
  • 高危行业企业探索实行什么制度
  • 办理税务登记与办理法人企业有何区别?
  • 收到股利的现金会计分录
  • 企业发生的哪些业务可以使用简易计税法
  • tplink路由器手机怎么设置
  • dir852迅雷路由器
  • 打开文件夹变成黑底
  • PHP:mb_ereg_replace_callback()的用法_mbstring函数
  • PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
  • mac的快捷键在哪
  • 网速变慢了
  • isahelp是什么进程
  • 房地产企业预缴税款最新规定
  • 免费设备投放项目
  • 奖金的发放应做到
  • 收到招标文件怎么回函
  • 长期待摊费用科目怎么使用
  • 收购发票的开具管理
  • 发票已开不确认收入可以吗?
  • 委托 研发费用
  • 会计中财务费用为负
  • vue连接webapi
  • 小企业销售折让与销售退回发生时如何处理
  • 土地使用权被政府收回没有注销怎么样缴土地使用税
  • 核电站弃置费用通常多少钱
  • 交房租会计分录怎么写好
  • 成品油办法废止后,加油站还需办理成品油许可证吗
  • 长期股权投资的账务处理
  • 清算所得税计税基础
  • 企业借款利息如何计算
  • 公司租赁个人车辆租金多少合适
  • 住宿费专票可以抵扣进项税吗税率多少
  • 给员工缴纳的雇工保险
  • 个体户所得税税率多少
  • 收到公司的钱写收据
  • 成本费用利润率一般在什么范围
  • 存货期末报表列示
  • 固定资产折旧算现金流入吗
  • mysql数据库详解
  • mac购买建议
  • linux操作系统版本有哪些
  • window10h2
  • win7打开游戏显示已停止工作
  • 直线画画
  • opengl示例
  • Cocos2dx3.2 CrazyTetris 物理引擎使用初步
  • dos命令检测硬盘坏道
  • JavaScript 2048 游戏实例代码(简单易懂)
  • unity资源管理机制
  • unicode类型 python
  • scp命令详解(全)
  • jquery给table赋值
  • jquery动态添加属性
  • 安卓自定义状态栏图标
  • 鼠标瞬间移动
  • android推送权限
  • JavaScript 中的事件教程
  • 安卓两页合并到下一页
  • js类继承的几种方式
  • 深圳买新房契税怎么收
  • 江西省国家税务局电子税务局
  • 云南省地方税务局关于城镇土地使用税
  • 船舶吨税是中央税还是地方税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设