Ant Design Pro ProTable受控菜单(JavaScript版和TypeScript版)

Posted 2021-11-22 シ゛甜虾

由于默认官网的教程已经改成TypeScript， 这里讲的是javascript版的使用

 TypeScript版，只列出关键代码，这里的name和列dataIndex值相同

import type { ProColumns, ColumnsState } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
//export default ()添加
const [columnsStateMap, setColumnsStateMap] = useState<Record<string, ColumnsState>>({
    name: {
      show: false,
      order: 2,
    },
  });
//ProTable添加
rowKey="key"
      columnsState={{
        value: columnsStateMap,
        onChange: setColumnsStateMap,
      }}

官方帮助文档

ProTable - 高级表格

JavaScript版，只列出关键代码jsonData是我要默认隐藏的列

const [columnsStateMap, setColumnsStateMap] = useState({
  jsonData: {
    show: false,
  },
});

columnsState={{
  value: columnsStateMap,
  onChange: setColumnsStateMap,
}}