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

  • 劳务公司发放农民工工资要开发票吗?
  • 企业为职工提供无偿服务
  • 金税盘数据怎么备份
  • 应交消费税的税目
  • 增值税附加税是几个点
  • 报送会计报表
  • 金税盘问题
  • 叉车折旧年限是几年预计净残值
  • 预付房租的会计科目
  • 可供出售金融资产改为什么科目
  • 房地产母公司将其土地变更到其全资子公司
  • 已开专票在哪里查询
  • 广告制作税收编码怎么填
  • sd标准差是什么意思
  • 发票上电话可以写手机号吗
  • 会计速动比率计算公式
  • 员工把发票丢了怎么处理
  • 金蝶k3外购入库单套打设置
  • 期末余额和期初余额
  • php如何实现多进程
  • php的类
  • uniapp h5发布
  • php处理json
  • 汇算清缴后补缴企业所得税账务处理
  • Win11 Build 22000.282正式版推送: 附更新修复内容汇总
  • 出口零退税率商品有哪些
  • php写木马
  • 其他综合收益需要结转吗
  • 调整以前年度管理费用会计分录
  • 小微企业减免附加税政策
  • 营业外收支的内容
  • 页面访问升级出错怎么办
  • JavaScript 30 JavaScript 日期格式
  • 3d点云处理算法
  • 2021前端热门技术解读
  • vi命令模式下的常用命令有哪些?
  • 股息和未分配利润的区别
  • 增值税申报表填错不影响税额
  • 应收票据包括哪些项目内容
  • 企业其他应付款余额非常大的原因
  • 企业福利费超过预算收入
  • 哪些合同不用计提印花税
  • 如何理解会计的本质
  • 微信转账没有显示对方的名字怎么办
  • 固定资产安装费计入入账价值吗
  • 替其他公司支付工资怎么做账
  • 当月支付当月租金需要计提吗
  • 发票线上申领线下配送
  • 城镇土地使用税减免税政策
  • 纳税申报利润总额计算公式
  • 新企业如何建帐
  • windos基于
  • windowsxp关机没反应
  • freebsd11.3安装教程
  • windows注册表简单应用
  • potplayer win7
  • 微软雅黑啥意思
  • ubuntu怎么禁用nouveau
  • nacos监控服务
  • linux文件压缩和备份实验
  • linux如何使用数据库
  • linux修改环境变量后需要重启吗
  • win8无法安装inter显卡驱动
  • bass表示什么
  • 批处理程序教程
  • javascript运行环境有哪些
  • nodejs实战教程
  • socketjs-node/info
  • Android AsyncTaskLoader需要注意的问题
  • linux反弹shell方法
  • android面试2021
  • javascript数据类型有哪些
  • javascript基础教程教材答案
  • python中的range和arange
  • javascript definitive guide
  • python默认方法
  • 成都市老年公交卡年审地点
  • 河南税务报到
  • 纳税人满意度调查问卷
  • 税务违法怎么处理
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设