基于Ant Design Pro 的修改的项目 (多标签tabs、拖拽、富文本、多功能table、多选Select)...

最新推荐文章于 2024-08-22 17:23:35 发布

weixin_33924770

最新推荐文章于 2024-08-22 17:23:35 发布

阅读量9.5k

点赞数 1

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cc7b523f265da038364d22f

版权

本文详细介绍了基于Ant Design Pro 2.0实现多标签页签（Ant Tabs）的原理和思路，包括如何引入组件、处理多标签唯一性、以及功能扩展如拖拽、富文本编辑器等。同时，提供了更新日志和相关链接以供参考。

摘要由CSDN通过智能技术生成

Ant Tabs（pro 2.0）

本文介绍Ant Tabs一些新增的功能和原理及思路介绍及更新日志。

实现多页签的原理及思路

Ant Tabs 基于 Ant Design Pro 2.0 基础上修改的多标签Tabs，修改此多标签也是工作上的需求，原来后台项目也是基于 Antd Design 来开发的，在 github上demo也不是很多，基本上也不符合自己的需求，于是就本着自己动手,丰衣足食的思想，自己在Antd Design的基础上修改了部分文件。

但是，中间也走了很多弯路，踩了很多坑，修改了多个版本最终才成了现在的需求，不过我觉得还可以，仅供大家参考。

引入 ant Tabs

主要修改文件 react-ant/src/layouts/BasicLayout.js 中引入Tabs 组件

代码解析

constructor(props) {
    super(props);
    const {routes} = props.route,routeKey = '/home/home'; // routeKey 为设置首页设置 试试 '/dashboard/analysis' 或其他key值
    const tabLists = this.updateTree(routes);
    let tabList=[];
    tabLists.map((v) => {
      if(v.key === routeKey){
        if(tabList.length === 0){
          v.closable = false
          tabList.push(v);
        }
      }
    });
    this.state = ({
        tabList:tabList,