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:'',//设置字段后在未保存的情