拖拽排序和列表上下排序

假设有一个这样的需求：table表头排序，用户可以将关心的列头排在前面。

我们都知道，使用第三方组件库时，一般需要设置参数  dataSource（table数据源，是一个数组，指定每一行字段的值） 和 columns（表头，是一个数组，各个列的属性），dataSource里面的值会自动赋值到与之字段相同的列上去。

所以dataSource还是dataSource，不用改，按正常逻辑请求接口获取列表数据即可，接下来要动的就是columns，既然要实现用户可以自己调整列，那么表头columns就不能写死了，而是需要跟后端交互动态存储和获取表头，改变完成后调接口取新的值赋值给columns就可以，具体接口如何调用，参数，返回值什么的跟你的后端商量好就行。

接下来就要封装一个用于让用户设置表头显示顺序的UI界面以及交互逻辑组件了，毕竟可能会有很多页面的table需要此功能。

第一种方法：列表上下排序（用户可以通过点击相应的移动按钮来调整顺序）

import React, { Component } from 'react';
import { connect } from 'dva';
import { Button, Card, Checkbox, Col, Row } from 'antd';
import styles from './index.less';
import { TableListItem } from '@/utils/TableData';

interface TableFieldsOrderProps {
  initialTags: TableListItem[],
  renderOnChange: (value: any) => void;
  renderIsVisible: (value: any) => void;
}

interface TableFieldsOrderState {
  initialTags?: TableListItem[],
  currentSelectedTag?: TableListItem,
}

@connect()
class TableFieldsOrder
  extends Component {
  state: TableFieldsOrderState = {
    initialTags: [],
    currentSelectedTag: {},
  };

  static getDerivedStateFromProps(props: any, state: any) {
    const {
      initialTags = [],
    } = props;
    return {
      initialTags,
    }
  }

  private onChange = (value: any) => {
    const { renderOnChange } = this.props;
    renderOnChange(value);
  };

  private isVisible = (value: any) => {
    const { renderIsVisible } = this.props;
    renderIsVisible(value);
  };

  // 设置显示列顺序——记录当前选中的表头字段
  private handleBlockSelected = (value: any) => {
    this.setState({ currentSelectedTag: value })
  }

  // 设置显示列顺序——字段移到最上
  private tableFieldMoveTop = () => {
    const { initialTags = [], currentSelectedTag = {} } = this.state;
    const currentIndex = initialTags.findIndex(tag => tag.id === currentSelectedTag.id)
    initialTags.splice(currentIndex, 1)
    initialTags.splice(0, 0, currentSelectedTag)
    this.onChange(initialTags)
  }

  // 设置显示列顺序——字段上移n条
  private tableFieldMoveUp = (num: number) => {
    const { initialTags = [], currentSelectedTag = {} } = this.state;
    const currentIndex = initialTags.findIndex(tag => tag.id === currentSelectedTag.id)
    initialTags.splice(currentIndex, 1)
    if (currentIndex - num < 0) {
      initialTags.splice(0, 0, currentSelectedTag)
    } else {
      initialTags.splice(currentIndex - num, 0, currentSelectedTag)
    }
    this.onChange(initialTags)
  }

  // 设置显示列顺序——字段下移n条
  private tableFieldMoveDown = (num: number) => {
    const { initialTags = [], currentSelectedTag = {} } = this.state;
    const maxIndex = initialTags.length - 1
    const currentIndex = initialTags.findIndex(tag => tag.id === currentSelectedTag.id)
    initialTags.splice(currentIndex, 1)
    if (currentIndex + num > maxIndex) {
      initialTags.splice(maxIndex, 0, currentSelectedTag)
    } else {
      initialTags.splice(currentIndex + num, 0, currentSelectedTag)
    }
    this.onChange(initialTags)
  }

  // 设置显示列顺序——字段移到最下
  private tableFieldMoveBottom = () => {
    const { initialTags = [], currentSelectedTag = {} } = this.state;
    const maxIndex = initialTags.length - 1
    const currentIndex = initialTags.findIndex(tag => tag.id === currentSelectedTag.id)
    initialTags.splice(currentIndex, 1)
    initialTags.splice(maxIndex, 0, currentSelectedTag)
    this.onChange(initialTags)
  }

  render() {
    const {
      initialTags = [],
      currentSelectedTag = {},
    } = this.state;
    return (
      

        <Card
          className="content-scroll-bar"
          bodyStyle={{ padding: '2px' }}
          style={{ width: '80%', display: 'inline-block' }}>
          {
            initialTags.map(tag => (
              <div
                className={tag.id === currentSelectedTag.id ? styles.tagClick : styles.tag}
                onClick={() => this.handleBlockSelected(tag)}
                key={tag.id}>
                <Checkbox
                  disabled={tag.disabled}
                  checked={tag.isVisible}
                  onChange={() => this.isVisible(tag)}>
                  {tag.title}
                
              
            ))
          }
        
        

          
            
              <Button
                key="moveTop"
                type="primary"
                onClick={this.tableFieldMoveTop}
              >最上
            
          
          
            
              <Button
                key="moveUpTen"
                type="primary"
                onClick={() => { this.tableFieldMoveUp(10) }}
              >上移十条
            
          
          
            
              <Button
                key="moveUpOne"
                type="primary"
                onClick={() => { this.tableFieldMoveUp(1) }}
              >上移一条
            
          
          
            
              <Button
                key="moveDownOne"
                type="primary"
                onClick={() => { this.tableFieldMoveDown(1) }}
              >下移一条
            
          
          
            
              <Button
                key="moveDownTen"
                type="primary"
                onClick={() => { this.tableFieldMoveDown(10) }}
              >下移十条
            
          
          
            
              <Button
                key="moveBottom"
                type="primary"
                onClick={this.tableFieldMoveBottom}
              >最下