ant design table左侧_Ant Design table设置自定义排序表头和对字段进行隐藏

react + antd 动态设置表头和对表头进行排序

1、对title字段设置显示隐藏；

字段隐藏.gif

2、对title字段进行拖拽排序；

拖动排序.gif

3、选择后未点击确认关闭弹框则重置数据

重置设置.gif

import React, { Component } from "react";

import {

Icon,

Table,

Button,

Card,

Tree,

} from "antd";

const { TreeNode } = Tree;

export default class Main extends React.Component {

constructor(props) {

super(props);

let plainOptions = [

{

title: "表头1",

key: "bt1"

},

{

title: "表头2",

key: "bt2"

},

{

title: "表头3",

key: "bt3"

},

{

title: "表头4",

key: "bt4"

},

{

title: "表头5",

key: "bt5"

}

];//模拟接口请求的字段列表

let checkedOptions = ["bt1", "bt2", "bt3", "bt4", "bt5"];//模拟接口请求的已选择字段

this.state = {

page_size: 10,

page: 1,

totalPage: 1,

totalCount: 1,

plainOptions, //默认的字段列表

checkedOptions, //默认的已选择字段

editPlainOptions: plainOptions, //当前选择的字段列表，未保存

editCheckedOptions: checkedOptions, //当前已选择字段，未保存

isClickHandleSearch:'',//设置字段后在未保存的情