xfflod-resCenter/src/views/Eng/Gate/DataTable.tsx

import { Divider, Space, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import moment from 'moment';
import React, { useMemo } from 'react';
import OpButton, { DelOpButton, EditOpButton } from '../../../components/crud/OpButton';
import { ElStItem } from '../../../models/_/defs';
import { IContextProp } from './_';





const DataTable: React.FC<{
  ctx: IContextProp
}> = ({ ctx }) => {

  const { pager, crud } = ctx;
  const columns = useMemo<ColumnsType<ElStItem>>(() => [
    { title: '序号', key: 'id', align: 'center', width: 80, render: (_1: any, _2: any, index: number) => ctx.pager.noRender(index) },
    { title: '闸阀代码', key: '闸阀代码', dataIndex: '闸阀代码', width: 120, align: 'center' },
    { title: '闸阀名称', key: '闸阀名称', dataIndex: '闸阀名称', width: 120, align: 'center' },
    { title: '产品名称', key: '产品名称', dataIndex: '产品名称', width: 120, align: 'center' },
    { title: '经度', key: '经度', dataIndex: '经度', width: 120, align: 'center' },
    { title: '纬度', key: '纬度', dataIndex: '纬度', width: 120, align: 'center' },
    { title: '所在位置', key: '所在位置', dataIndex: '所在位置', width: 120, align: 'center' },
    { title: '型号', key: '型号', dataIndex: '型号', width: 120, align: 'center' },
    { title: '规格', key: '规格', dataIndex: '规格', width: 160, align: 'center' },
    { title: '结构长度', key: '结构长度', dataIndex: '结构长度', width: 120, align: 'center' },
    { title: '创建日期', key: '创建日期', dataIndex: '创建日期', width: 120, align: 'center' },
    {
      title: '操作', key: 'op', align: 'center', width: 200, render: rec =>
      (<Space split={<Divider type="vertical" />}>
        <OpButton text='编辑'></OpButton>
        <OpButton text='详情'></OpButton>
        <OpButton text='删除'></OpButton>
      </Space>
      )
    }
  ], []);

  return (
    <>
      <Table
        columns={columns}
        rowKey={row => row.水电站代码}
        {...pager.tableProps}
        dataSource={[]}
      />
    </>
  )
}

export default DataTable