cjd-parkball/src/components/table/demo/basic.md

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

---
title: 表格的基本用法
title_en: normal usage for Table component
category: 2
---
展示了一个表格组件的基本用法
```jsx
import { Table } from 'parkball'

const columns = [{
  title: '名称',
  dataIndex: 'name',
},{
  title: '性别',
  dataIndex: 'sex',
},{
  title: '年龄',
  dataIndex: 'age',
},{
  title: 'oa 编码',
  dataIndex: 'code',
},{
  title: '手机号',
  dataIndex: 'mobile',
},{
  title: '联系人',
  dataIndex: 'contact',
},{
  title: '联系方式',
  dataIndex: 'contactMobile',
},{
  title: '负责人',
  dataIndex: 'owner',
  tip: true,
},{
  title: '负责人手机号',
  dataIndex: 'ownerMobile',
},{
  title: '所在省市',
  dataIndex: 'region',
  tip: true,
},{
  title: '所属街道',
  dataIndex: 'street',
},{
  title: '状态',
  dataIndex: 'status',
},{
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  operationItemLength: 2,
  render: (text, record, index) => [
    <a href="#">操作1</a>,
    <a href="#">操作2</a>,
    <a href="#">操作3</a>,
    <a href="#">操作4</a>,
    <a href="#">操作5</a>,
    <a href="#">操作6</a>,
  ]
}]

const dataSource = [{
  name: 'vico',
  mobile: 15167190000,
  key: 1,
  'sex': 1,
  'age': 1,
  'code': 1,
  'contact': 1,
  'contactMobile': 1,
  'owner': 1,
  'ownerMobile': 1,
  'region': 1,
  'street': 1,
  'status': 1,
},{
  name: 'sherry',
  mobile: 18758110000,
  key: '2',
  'sex': '女',
  'age': 25,
  'code': 16723712,
  'contact': '小明的爸爸',
  'contactMobile': 13000000000,
  'owner': ['小明的妈妈', '小明的爷爷', '小明的奶奶', '小明的爸爸', '小明的外公', '小明的外婆', '小明的舅舅', '小明的舅妈', '小明的姑姑', '小明的姑父'],
  'ownerMobile': 15000000000,
  'region': ['浙江省杭州市西湖区1', '浙江省杭州市西湖区2', '浙江省杭州市西湖区3', '浙江省杭州市西湖区4'],
  'street': '阿里云飞天园区',
  'status': '有效',
}]

ReactDOM.render(
  <Table tableKey='table-basic' custom inline dataSource={dataSource} dragMode="column" resize columns={columns} />,
  mountNode
)
```