ttk-app-core/src/apps/app-demo/table/auto-width/components/table.js

@ttk/recat enterprise develop framework

import React, { useState, useEffect, useCallback } from 'react'
import { Table, Button } from 'antd'
import { useActions, useData, useCommit } from '@ttk/app-loader'

export default React.memo(Com)
function Com(props) {
  const commit = useCommit()
  const actions = useActions(props)
  const treeData = useData([props, 'treeData']).toJS()

  useEffect(() => {
    actions.getTreeData() // 获取数据
  })
  const [columns, setColumns] = useState([
    {
      title: '名称',
      width: 100,
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      width: 100,
      dataIndex: 'age',
      key: 'age',
    },
    { title: '自动列宽1', dataIndex: 'address', key: '1'},
    { title: '自动列宽2', dataIndex: 'address', key: '2' },
    { title: '自动列宽3', dataIndex: 'address', key: '3' },
    { title: '自动列宽4', dataIndex: 'address', key: '4' },
  ])

  const onDelete = (title) => {
    let data = columns.filter((item) => {
      return item.title != title
    })
    setColumns(data)
  }

  return (
    <React.Fragment>
      <div>
        &emsp;<Button type="danger" onClick={() => onDelete("自动列宽1")}>删除自动列宽1</Button>
        &emsp;<Button type="danger" onClick={() => onDelete("自动列宽2")}>删除自动列宽2</Button>
        &emsp;<Button type="danger" onClick={() => onDelete("自动列宽3")}>删除自动列宽3</Button>
        &emsp;<Button type="danger" onClick={() => onDelete("自动列宽4")}>删除自动列宽4</Button>
      </div>
      <br />
      <Table columns={columns} dataSource={treeData} bordered />
    </React.Fragment>
  )
}