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

  • 进项税额转出补交税款
  • 小规模免征增值税会计处理
  • 普票需要填写全部开票信息吗
  • 全资收购企业需要交税吗
  • 适用会计制度备注怎么填?
  • 财务报表中的负债是什么意思
  • 出售无形资产计入资产处置损益还是营业外收入
  • 股东转钱到公司怎么备注
  • 建筑企业劳保计入哪个科目?
  • 公司预付签证费怎么入账
  • 凭证单据的整理
  • 交车辆购置税可以刷信用卡吗
  • 公司还没有核税该如何进行业务汇款?
  • 受托加工费的成本都有什么
  • 免抵调增值税是否缴纳附加税
  • 调整期初数怎么做会计分录
  • 收到上级补助收入支出时财务会计怎么记账
  • 差额征税一般纳税人认定标准
  • 本月没开发票怎样报税
  • 免税店购物需要满足什么条件
  • 免税农产品抵扣政策
  • 民间非营利组织会计制度会计科目
  • 职工福利费的计提标准
  • 支付保证金需要附件
  • rtmservice.exe - rtmservice是什么进程 有什么用
  • 临时经营如何纳税
  • 个税零申报流程视频教程
  • 七月份收入
  • vue定时调用方法
  • 上海地铁9号线一期工程
  • eccv论文下载
  • php function函数的用法
  • 电子发票手动导出到哪
  • 公司购买办公用品会计分录
  • seata1.3.0配置
  • 不能抵扣的进项税转出账务处理
  • 工程发票预缴是什么意思
  • 应收票据到期后账务处理
  • mysql存储过程传入参数
  • 填写备案信息的目的
  • 收到所得税退税现金流量选哪个
  • 付款方和发票抬头不一致会计处理
  • 未开票收入怎么申报增值税
  • 增值税专用发票丢了怎么补救
  • 进项税额转出是什么科目
  • 住宿发票 抵扣
  • 应付利息属于什么负债
  • 中标服务费可以税前扣除吗
  • 收到支付宝认证怎么做账
  • 机票行程单可以打印几次
  • 微信转账报销怎么退回
  • 服务行业服务费怎么入账
  • 什么叫小微企业主?
  • 取暖费用摊销吗
  • 我没付款,但是显示成功?
  • 多种不同的 MySQL 的 SSL 配置
  • Mysql Explain 详细介绍
  • 隐藏的系统
  • linux 判断语句
  • linux 查看磁盘io繁忙
  • windows7一键还原在哪
  • 在linux系统中,用来存放系统所需要的配置文件
  • 批处理 >nul
  • 批处理常用命令总结
  • opengl入门视频教程
  • dos命令查看
  • jquery.css
  • python ar
  • python简单gui
  • 在谈到民族这个概念是我们一再指出
  • jquery 是否显示
  • 湖南国家电子税务局手机版
  • 社保已申报怎么停止缴费
  • 四川召开延迟退休座谈会
  • 长春税务局待遇如何
  • 新车缴纳车船税减免性质是什么
  • 可以在企业所得税税前扣除的税金
  • 小规模纳税人销售自己使用过固定资产
  • 买车没有按时交车怎么办
  • 我国近十年财政支出结构占比
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设