【后台管理系统】—— Ant Design Pro 页面相关（三）

一、卡片Card分类

• 与普通卡片使用区别：底部按钮及内容样式

  <Card
          hoverable
          bodyStyle={{ paddingBottom: 20 }}
          actions={[          // 卡片操作组，位置在卡片底部
              this.showEditModal(item)}>修改,
               this.deleteItem(item)}>
                   删除
               
          ]}
   >
          } title={item.comName} />   //头像、类名、描述等，位置在卡片左侧
              
     
              <CardInfo
                        productCount={item.productCount}
               />
               
  

• 动态添加卡片分类：List的dataSource数组第一个位置为空串，遍历时，遇到item渲染卡片，否则ListItem中包裹自定义按钮

  
                item ? (
                  
                     this.editCategory(item)}>修改,
                             this.deleteCategory(item)}>
                              删除
                            
                          ]}>
                      }
                        title={{item.categoryName}}
                        description={
                          
                            {`共 ${item.productCount}个商品`}
                          
                        }
                      />
                    
                  
                ) : (
                         // 空串位置 渲染按钮
                     this.addCategory()}>
                       新增分类
                    
                  
                )
  />
  

　　

二、分布表单

• 步骤条组件的使用，current指定当前步骤，从 0 开始记数

  export default class StepForm extends PureComponent {
    getCurrentStep() {
      const { location } = this.props;
      const { pathname } = location;
      const pathList = pathname.split('/');
      switch (pathList[pathList.length - 1]) {
        case 'info':
          return 0;
        case 'confirm':
          return 1;
        case 'result':
          return 2;
        default:
          return 0;
      }
    }
  
    render() {
      const { location, children } = this.props;
  
      return (
        
          
            
              
                
                
                
              
              {children}    // 可直接写为三个状态对应的三个表单子组件
            
          
        
      );
    }
  }
  

  有个疑问：框架自带Mock页面Form->StepForm->index.js、step1.js、step2.js、step3.js实现切换表单的方式还没弄明白。。。　

---

注：转载请注明出处