位置: IT常识 - 正文

antd——使用a-tree组件实现 检索+自动展开+自定义增删改查功能——技能提升(antd怎么用)

编辑:rootadmin
antd——使用a-tree组件实现 检索+自动展开+自定义增删改查功能——技能提升

推荐整理分享antd——使用a-tree组件实现 检索+自动展开+自定义增删改查功能——技能提升(antd怎么用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:antd autocomplete,antd-ui,antd怎么用,antd按需引入,antd的tabs,antd useform,antd的tabs,antd useform,内容如对您有帮助,希望把文章链接给更多的朋友!

之前写后台管理系统时,遇到一个下面的需求,下面是最终完成的效果图。 实现的功能有:

1. 下拉 选择不同的类型——就是一个普通的select组件,下面并不做介绍2. 通过关键字可以进行tree树形结构的筛选,然后将筛选后的内容自动展开

3. tree组件中,每一条数据,鼠标移入后展示 增/删/改 图标,点击有对应的功能

下面直接上代码一:tree组件的使用<a-tree :treeData="treeData" ref="treeNode" v-if="treeData" :showIcon="false" class="tree-list" :defaultExpandAll="true" :expandedKeys.sync="defaultExpandedKeys" tree-default-expand-all :replaceFields="replaceFields"></a-tree>1. treeData :tree组件的数据源2. ref:相当于id,可以通过此参数获取到dom结构3. v-if:只有当有数据源的时候才显示组件4. showIcon:设置成false,就不会展示默认的tree组件图标了,此时可以通过自定义图标的形式来展示自定义的效果了5. class="tree-list":因为我进行了自定义的样式处理,此时添加一个类名用于与其他tree组件区分6. defaultExpandAll:设置成true,默认展开所有节点,也可以通过下面的expandedKeys来指定展开的节点7. expandedKeys:异步指定要展开的节点,用于筛选后所有符合条件的数据的展开8. replaceFields:当数据源给定的数据结构与期望的结构不符时,可以通过此参数进行设置。我这边的配置如下: replaceFields: { children: 'children', title: 'title', key: 'key', value: 'subTitle', },二:使用插槽实现自定义组件结构<a-icon slot="switcherIcon" type="caret-down" /><template slot="custom" slot-scope="item"> <div @mouseenter="mouseenter(item)" style="position: relative"> <span style=" height: 30px; width: 70%; display: flex; align-items: center; " > <a-icon type="home" theme="filled" style=" height: 30px; line-height: 30px; padding-right: 5px; " v-if="item.slots.Code" /> <a-icon type="user" style=" height: 30px; line-height: 30px; padding-right: 5px; " v-if="item.slots.UserId" /> <span style=" height: 30px; display: inline-block; max-width: 80%; overflow: hidden; text-overflow: ellipsis; padding-right: 5px; " >{{ item.title }}</span > <span style=" height: 30px; display: inline-block; max-width: 80%; overflow: hidden; color: #f90; font-weight: bold; height: 30px; " > <span v-if="item.slots.IsSecondary" >[兼]</span > <span v-if="item.slots.IsLeader" >[责]</span > </span> </span> <a-space @click.stop v-if="currentId == item.key" style="position: absolute; right: 25px; top: 0" > <a-icon type="plus-square" style="color: green" @click.stop="handleAdd(item)" v-if="item.key.indexOf('U') == -1" /> <a-icon type="edit" @click.stop="handleEdit(item)" /> <a-icon type="delete" @click.stop="handleDel(item)" style="color: red" v-if="item.key.indexOf('U') == -1" /> </a-space> </div></template>三:数据结构需要转化成 scopedSlots自定义的插槽

原有的数据结构: 将上面的数据结构通过下面的方法进行转化。

filterTreeData(arr) { arr.forEach((item) => { item['scopedSlots'] = { title: 'custom' }; item.Id = item?.slots?.Id; item.Name = item?.slots?.Name; item.selectable = true; item.subTitle = item.title + '(' + item.key + ')'; this.$forceUpdate(); if (item.children) { this.filterTreeData(item.children); } });},antd——使用a-tree组件实现 检索+自动展开+自定义增删改查功能——技能提升(antd怎么用)

最终转化后的数据结构如下: 此时就可以通过上面前两步的设置进行正常渲染了。

四:监听关键字的检索4.1 节流检索关键字//先定义一个定时器,然后在指定时间内,默认是200毫秒,如果发生变化,则清理定时器,重新定时debounce(callback, delay = 200) { clearTimeout(this.timeout); this.timeout = setTimeout(() => { callback(); }, delay);},4.2 input组件作为输入框 <a-input style="margin-top: 8px; margin-bottom: 8px" v-model="searchValue" placeholder="请输入关键字" @change="onChange($event.target.value)" allowClear/>4.3 监听input的change事件onChange(value) { this.defaultExpandedKeys = []; if (value) { this.debounce(() => { //此时需要根据value关键字,从treeData数据源中查找对应的数据,将key存放到defaultExpandedKeys数组中,就可以实现自动展开功能了。 }); } else { this.treeData = JSON.parse(JSON.stringify(this.originTreeData)); }},4.4 通过XEUtiles.searchTree实现 多层对象数组的检索this.treeData = XEUtiles.searchTree( this.treeData, (item) => { if (item.title.toLowerCase().indexOf(value.toLowerCase()) > -1) { if (item.parent) { this.defaultExpandedKeys.push('S-' + item.parent); } this.defaultExpandedKeys.push(item.key); return true; } else { return false; } }, { children: 'children' });4.5 npm install xe-utils --save——我这边安装的版本是3.5.6"xe-utils": "^3.5.6"4.6 局部页面引入xe-utils

const XEUtiles = require('xe-utils');

xe-utils使用文档说明:https://vxetable.cn/xe-utils/#/

入参:(数据源,查找条件,children的字段可以自定义)。

可以将符合条件的数据,每一层的父级都找出来。

具体的使用原理我没有研究,但是不用自己一层层遍历循环,还是很好的。

五:鼠标移入mouseenter(item) { this.currentId = item.key;},

通过currentId参数与数据源中的key匹配,相同的则展示对应的图标。

完成!!!

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

上一篇:在Linux上使用VirtualBox的命令行管理界面的方法讲解(linux virt-manager)

下一篇:Linux sar命令详解之分析系统性能案例(linux sar文件)

  • 适合在六一发的文案(适合在六一发的朋友圈)(适合在六一发的文案)

    适合在六一发的文案(适合在六一发的朋友圈)(适合在六一发的文案)

  • 抖音投屏可以全屏的吗(抖音投屏可以全屏显示吗)

    抖音投屏可以全屏的吗(抖音投屏可以全屏显示吗)

  • 抖音怎么设置别人不能下载我的作品(抖音怎么设置别人可以下载我的作品)

    抖音怎么设置别人不能下载我的作品(抖音怎么设置别人可以下载我的作品)

  • 华为nova6微信视频模糊(华为nova6微信视频美颜开启)

    华为nova6微信视频模糊(华为nova6微信视频美颜开启)

  • 华为信息删除了怎么找回(华为信息删除了在哪里可以找到)

    华为信息删除了怎么找回(华为信息删除了在哪里可以找到)

  • winzip universal是什么软件(winzip universal是电脑自带的吗)

    winzip universal是什么软件(winzip universal是电脑自带的吗)

  • 滴滴打车是先付钱还是后付钱(滴滴打车是先付还是后支付)

    滴滴打车是先付钱还是后付钱(滴滴打车是先付还是后支付)

  • 什么是基于互联网的相关服务的增加使用和交付模式(什么是基于互联网手段进行宣传推广的活动)

    什么是基于互联网的相关服务的增加使用和交付模式(什么是基于互联网手段进行宣传推广的活动)

  • 怎么找回淘宝店铺(怎么找回淘宝店铺已换手机)

    怎么找回淘宝店铺(怎么找回淘宝店铺已换手机)

  • 为什么库乐队没有共享(为什么库乐队没有30秒一天显示)

    为什么库乐队没有共享(为什么库乐队没有30秒一天显示)

  • iphone8plus还生产吗(苹果8plus2020年还生产吗)

    iphone8plus还生产吗(苹果8plus2020年还生产吗)

  • 苹果笔记本bar是什么(苹果电脑bar用处大吗)

    苹果笔记本bar是什么(苹果电脑bar用处大吗)

  • qq等级怎么快速升高(qq等级怎么快速升皇冠)

    qq等级怎么快速升高(qq等级怎么快速升皇冠)

  • mate30充电发热(mate30充电发热严重怎么办)

    mate30充电发热(mate30充电发热严重怎么办)

  • 第九代i5和i7的区别有多大(九代i5和i7差别)

    第九代i5和i7的区别有多大(九代i5和i7差别)

  • 如何解除开发者模式(解除开发者模式)

    如何解除开发者模式(解除开发者模式)

  • mate20支持超级蓝牙吗(mate20pro支持超级蓝牙么)

    mate20支持超级蓝牙吗(mate20pro支持超级蓝牙么)

  • 微信一定要手机号码才能注册吗(微信一定要手机登录电脑才能登录吗)

    微信一定要手机号码才能注册吗(微信一定要手机登录电脑才能登录吗)

  • 手机开机特别慢怎么办(手机无法开机是什么原因)

    手机开机特别慢怎么办(手机无法开机是什么原因)

  • 手机卡怎么升级4g(手机卡怎么升级5g)

    手机卡怎么升级4g(手机卡怎么升级5g)

  • 小米8wifi断流怎么解决(小米8sewifi断流)

    小米8wifi断流怎么解决(小米8sewifi断流)

  • 苹果7哪里看诊断与用量(苹果7p怎么看)

    苹果7哪里看诊断与用量(苹果7p怎么看)

  • iqoo有红外吗(iqoo有没有红外线功能)

    iqoo有红外吗(iqoo有没有红外线功能)

  • led显示屏p6(LED显示屏P6和P8哪个高清)

    led显示屏p6(LED显示屏P6和P8哪个高清)

  • 承租方支付租房税费
  • 研发设备的折旧费计入研发费吗
  • 买新车时旧车置换新车划算吗
  • 防火门属于固定式防火风格
  • 劳务公司交企业所得税吗
  • 外资企业是否属于公有制经济
  • 买二手设备还需要备案吗
  • 公司购买汽车的购置税怎么做账
  • 利息支出可以抵扣吗
  • 国税 增值税
  • 发票采集即征即退怎么填
  • 定期定额的个税起征点
  • 商贸流通企业包括哪些
  • 本年利润是负数的会计分录
  • 应交税费应交增值税转出多交增值税
  • 物业公司支付出的费用
  • 公司购买办公用品计入什么科目
  • 环境保护税即将施行 有哪些点需要关注?
  • 住房维修基金使用管理办法
  • 收到上月发票怎么写分录
  • 纳税人申领发票流程
  • 对整个产品的零件退回的财务会计处理?
  • 棚户区改造贷款管理办法
  • 本地磁盘c满了怎么清理
  • 银行对公账户收款码手续费多少
  • 财务如何核对会计信息
  • 企业预付工程车租赁费
  • 解决的英文
  • vue props emit
  • 利润分配弥补亏损会计分录
  • this.emit('input')
  • 私人定制ai绘画下载
  • 原始凭证一般没有
  • 社保退回的款怎么继承
  • 资产负债表和利润表的勾稽关系
  • mysql查询的结果缓存里怎么清除
  • 帝国cms批量excel导入文章
  • sql server删除表命令
  • 初学access收获心得
  • 往来款和货款
  • 应交税金科目的核算
  • mysql重置
  • 建筑行业收到的工程转给项目经理成本票从哪来
  • 子公司注销母公司收回现金流
  • 减少实收资本会影响资产吗
  • 税控设备技术维护费
  • 收据能不能入账账户
  • 出资方式现金
  • 个人独资企业核定征收取消了吗
  • 库存商品成本差异怎么结转
  • 现金日记账怎么填写规范
  • MySQL存储过程与触发器
  • mysql 存储过程存放在哪里
  • 完美解决索尼电视arc无声音
  • CentOS中mysql cluster安装部署教程
  • solaris 11.4
  • linux ./执行
  • 在任务栏右下角添加图标
  • win8怎么进去安全系统
  • cocoscreator lua
  • [置顶]马粥街残酷史
  • 环境篇作文
  • 计算机网络设计
  • 微信小程序自定义相机
  • 画廊作品
  • 如何关闭危险端口
  • 网页制作范例
  • node.js使用教程
  • 辽宁省电子税务局电话
  • 云南省税务局咨询电话
  • 纳税人分类分级管理四个匹配
  • 护肤品关税税率
  • 进口汽车增值税怎么算
  • 重庆沙坪坝区沙磁巷幼儿园
  • 中石化一键加油周几有优惠
  • 土地增值税优惠政策办理流程和手续方面的精简措施
  • 公司注销时注册资金未缴完
  • 个人所得税网上报税流程
  • 签订设计合同
  • 2020年国税和地税怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设