位置: 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文件)

  • 小规模忘了报税怎么办
  • 关税的完税价格是什么意思
  • 公司老板有钱吗
  • 金融企业哪些方面可以进行数据分析
  • 税控盘网上申请解锁
  • 无销项税额
  • 小规模机械租赁公司
  • 购买基金会计分录怎么填
  • 收入转本年利润的会计分录
  • 缴交社保基金会计分录怎么写?
  • 小规模纳税人财务报表是按季还是按月申报
  • 承兑汇票怎么委托收款
  • 公司注销时长期投资怎么处理
  • 员工入股怎么分成
  • 公司产品中请别人开发的软件怎么会计处理?
  • 年薪制有什么好处
  • 社保发票是普票还是专票
  • 银行手续费可以抵扣企业所得税吗
  • 应征增值税不含税销售额是什么意思
  • 十分钟看懂财务报表
  • 个人社保费需要交多少年
  • 预收购货款的会计分录
  • 退还工会经费会退回吗
  • win10开发工具在哪
  • PHP中register_shutdown_function函数的基础介绍与用法详解
  • php中的函数可以分为哪几种
  • git pull远程
  • 支付给代理机构的手续费
  • PHP:pg_connection_status()的用法_PostgreSQL函数
  • 报销是可以直接拿钱的吧
  • 工程结算书和竣工结算书
  • php静态函数
  • 个体户不建账怎样处罚
  • composer环境变量
  • 新一代状态管理工具 -- Pinia 上手指南
  • Smarty实现页面静态化(生成HTML)的方法
  • 李宏毅课程
  • 给工程项目买保险合法吗
  • 律师事务所的日记怎么写
  • 资金账簿印花税怎么算
  • 企业会计日志
  • okhttp3源码
  • dede织梦怎么转成zblog
  • 经营范围技术服务技术开发技术咨询技术交流
  • 经营性现金流量为什么要加上折旧
  • 公司购买食品如何入账科目
  • 纳税人申报的方法有哪些
  • 实收资本变化
  • 金税盘购买的会计分录
  • 旧设备出口可以退税吗
  • 成品油办法废止后,加油站还需办理成品油许可证吗
  • 以非现金资产清偿债务的方式下,债权人
  • 厂家给经销商的活动方案怎么写
  • 诉讼财产保全保函
  • 国际货运公司支付境外运费
  • 以自营方式建造固定资产
  • 本月未过账的凭证怎么写
  • 车票抵扣填在申请表哪里
  • 什么是批发零售市场
  • 资产负债表里包括应付利息吗
  • 固定资产原值如何计算
  • 设备上的配件计入什么费用
  • sqlserver按时间段导出数据
  • mssql注入使用命令
  • windows10预览
  • 查看win8.1版本
  • linux创建目录函数
  • 遮罩层在上还是在下
  • python hashcode
  • shell监控文件
  • python中的\r
  • vue中的event
  • python语言文件
  • jQuery插件能输出到控制台
  • 大学的python选修课好学吗
  • 基于javascript的毕业设计选题
  • 个人所得税子女教育到多大结束
  • 交契税可以用现金吗
  • 郑东新区社保局电话号码是多少
  • 非中山户籍学生可以自己买医保吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设