商品列表 Demo

import React from 'react'
import {Card,Table,Button  } from 'antd' 
export default function ListProducts(){
  const dataSource = [{
    id: 1, name: '香皂',
    price: 5
  }, {
    id: 2, name: '特伦苏',
    price: 6
  },
  {
    id: 3, name: '小浣熊',
    price: 1.5
  }]
  const columns = [{
    title: '序号',
    key:'id',
    width: 80,
    align: 'center',
    render:(txt,record,index) => index+1
  }, {
    title: '名字',
    dataIndex: 'name'
  },
  {
    title: '价格',
    dataIndex: 'price'
  }];
    return (
      <Card title="商品列表" extra={<Button type="primary" size="small">新增</Button>}>
        <Table columns={columns} bordered dataSource={dataSource}/>

      </Card>

    );

}