【项目】知识库项目优化

本文分享了在知识库项目优化中遇到的前端挑战,包括如何给树形数据添加自定义属性以实现左侧缩进和右侧对齐,通过递归计算层级并动态绑定样式;限制目录树高度并添加滚动条;以及改进层级搜索功能,现在搜索后仅显示包含关键字的层级,提高了用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


一个迭代开发后基本的功能实现,下一个迭代一般就是优化,这次的优化点主要是,层级目录实现右对齐,每层级长度不一样,然后在选择层级时限制目录树高度,有滑动窗。
一些效果显示哈

通过这次优化学到几个知识点如下

给树形数据自定义数据

将目录树右对齐,需要给三个层级设置各自的长度,实现左侧缩进,右侧对齐,期初想要直接从antd暴露的pos或者key是类似这种数据“0-0-1”这种,一开始打算通过pos.split(‘-’).length来判断层级,但是没有暴露在dataRef中,无法直接获取,所以卡了一两天,后面通过重写data,然后自定义属性,主要是在重写的时候,根据递归的次数
然后暴露出去

/**
     * 将获得的数据转为Tree控件格式数据,key、title、children
     */
    const dealTreeData = (treeData: any, deepth: number = 0) => {
   
      const data1 = treeData.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值