npm i ant-table-columns
or
yarn add ant-table-columns
import { TableMenuModal, comLocalData } from 'ant-table-columns';
state={
columnsModalState: false
}
tableColumns = [
{
title: '运单号',
dataIndex: 'orderSn',
key: 'orderSn',
align: 'left',
width:150,
}
{
title: '操作',
dataIndex: 'handle',
key: 'handle',
align: 'center',
fixed: 'right',
}
];
/**
* 点击事件处理自定义弹窗modal的出现
*/
customEvent = () => {
this.setState({
columnsModalState: true
})
}
handleCancel= () => {
this.setState({
columnsModalState: false
})
}
render() {
const localName='component:list'; //命名localstorage 尽量用组件名称保证不重复
const curColumns = comLocalData(this.tableColumns,localName);
const scrollWidth = curColumns.map(item => (item.width || 120)).reduce((pre, next) => {
return pre + next
}, 0); //这里处理操作栏固定在右侧的情况
return (
<Button type="primary" ghost onClick={this.customEvent}>自定义列表</Button>
<Table
columns={curColumns}
scroll={{ x:scrollWidth }}
/>
{this.state.columnsModalState &&
<TableMenuModal
modalState={this.state} //modal的状态 Object|Boolean
handleCancel={this.handleCancel}
curColumns={JSON.parse(JSON.stringify(this.tableColumns))}
localName={localName}
limitCount={10} //控制最少选择几个 注:已默认过滤掉操作栏 非必填
disabledKey={['operation','businessCode']} //控制不能勾掉的列表头 非必填
className='owner-name' //自定义类名 String|css modules 非必填
/>
}
)
}
Package | Version | Dev |
---|---|---|
antd | 3.8.2 | ✔ |
react | 16.4.1 | ✔ |