利用Object.key()和map()制作显示隐藏表格行（ant-design Table）react

利用Object.key()和map()制作显示隐藏表格行（ant-design Table）react

useState设置数据

//定义一个数据
  const [column, setColumn] = useState([]);
  //用setColum方法可以直接赋值
  let arr = [1,2,3,4]
  setColumn(arr)
  //这样column的值就是arr了

useEffect类似于生命周期,他有两个参数，一个是处理函数，一个是你需要实时监听的

    useEffect(() => {
        let columns1 = getHeaderColumn(header);
        setColumn(columns1);
        setCurrentHeader(allHeader);
    }, [allHeader]);

Object.key()获取对象中的所用属性

var obj = {'a':'123','b':'345'};
console.log(Object.keys(obj));  //['a','b']

完整代码

const Page1 = () => {

    const [data, setdata] = useState([]);
    //useState设置数据
    const [column, setColumn] = useState([]);
    const [currentHeader, setCurrentHeader] = useState({});
    const allHeader = {
        blue: {
            name: "名称",
            age: "age",
        },
        red: {
            name1: "名称1",
            age1: "age1",
        },
    }；
    let header = allHeader,//保存原来的数据，恢复的时候需要
        columns1 = [];
        //useEffect类似于生命周期
    useEffect(() => {
      //页面初始化数据
        let columns1 = getHeaderColumn(header);
        setColumn(columns1);
        setCurrentHeader(allHeader);
    }, []);
    const getHeaderColumn = (header) => {
        let columns1 = [];
        Object.keys(header).map((key) => {
            let item = header[key]; 
            //因为header[key]有两种状态：一种是对象(展开)，一种是string(隐藏），所以我们需要判断一下
            if (typeof item === "object") {
                Object.keys(item).map((cKey, cIndex) => {
                    let cItem = item[cKey];
                    let obj = {
                        title: () => (
                            <div>
                                {cIndex === 0 && (
                                    <span
                                        style={{ color: key }}
                                        onClick={(e) =>
                                            onClickExpendEvt(e, key)
                                        }
                                    >
                                        点
                                    </span>
                                )}
                                {cItem}
                            </div>
                        ),
                        dataIndex: cKey,
                        key: cKey,
                    };
                    columns1.push(obj);
                });
            } else {
                let obj = {
                    title: () => (
                        <div onClick={(e) => onClickExpendEvt(e, key)} style={{color:key}}>点</div>
                    ),
                    dataIndex: key,
                    key: key,
                };
                columns1.push(obj);
            }
        });
        return columns1;
    };
//点击显示
    const onClickExpendEvt = (e, key) => {
        let getColumn = [],
            getHeader = currentHeader;
            //为展开的时候，直接让他为一个空，但保持原来的状态
        if (typeof getHeader[key] === "object") {
            getHeader[key] = key;
        } else {
        //为隐藏的时候重新走一次上面的步骤
            getHeader[key] = allHeader[key];
        }
        columns1 = getHeaderColumn(getHeader);
        setColumn(columns1);
        setCurrentHeader(getHeader);
    };
    useEffect(() => {
        let data = [
            {
                key: 1,
                name: "John Brown",
                age: 32,
                address: "New York No. 1 Lake Park",
                description:
                    "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.",
            },
            {
                key: 2,
                name: "Jim Green",
                age: 42,
                sex: 1,
                address: "London No. 1 Lake Park",
                description:
                    "My name is Jim Green, I am 42 years old, living in London No. 1 Lake 
        ];
        setdata(data);
    }, []);

 
    return (
        <div className={style["wrap"]}>
            <Table columns={column} dataSource={data} />
        </div>
    );
};

export default Page1;