# and 组件

**Repository Path**: yp1995/and-component

## Basic Information

- **Project Name**: and 组件
- **Description**: 导出组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-11
- **Last Updated**: 2022-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# and 组件

#### 介绍
导出组件

#### 软件架构
软件架构说明


#### 安装教程

1.  git clone ********

#### 使用说明
Export
1.  放入 antd 的 src/components 目录下
2.  使用文件中 import Export from '@/components/Export/export'
3.     <Export
            fileName={'需求咨询.xls'} //导出的名称
            url={'/api/backend/consulting/excel-export?is_type=1'} //方法路径
          ></Export>,
4.  src/components/Export/export'中的 Authorization': 'Bearer ' + localStorage.getItem("key"), 修改自己存密钥的方式

Sort****
1.  放入 antd 的 src/components 目录下
2.  使用文件中 
    
    import OrderByTable from '@/components/Sort/components'
    
     import type { ProColumns } from '@ant-design/pro-table';
    
使用

 const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);
    
  const columns: ProColumns[] = [

      {
        title: '排序',
         dataIndex: 'sort',
        width: 60,
         className: 'drag-visible',
         render: () => <DragHandle />,
     },
    {
        title: '姓名',
         dataIndex: 'name',
         className: 'drag-visible',
     },
    {
       title: '年龄',
       dataIndex: 'age',
     },
    {
         title: '地址',
        dataIndex: 'address',
     },
 ];

 const data = [

     {
         id: '1',
         name: 'John Brown',
         age: 32,
         address: 'New York No. 1 Lake Park',
         index: 0,
     },
     {
         id: '2',
         name: 'Jim Green',
         age: 42,
        address: 'London No. 1 Lake Park',  
    index: 1,
     },
     {
         id: '3',
        name: 'Joe Black',
         age: 32,
         address: 'Sidney No. 1 Lake Park',
         index: 2,
     },
  ];
 

  export default () => {

     const actionRef = useRef<ActionType>();
      return ( <>
              <OrderByTable
                 headerTitle={"列表拖拽排序"}
                 toolBarRender={()=>[
                     <><Export fileName="测试.xls" url="/api/backend/news/excel-export?is_type=1"/></>
                     ]
                 }
                 columns={columns}
                 data={data}
                 
                 actionRef={actionRef}
                orderByRequest={setOrderBy} //修改排序的接口
              />
     </>
 
      );
  };