5-2 使用antDesign的Table 及 modal(對話情景框) 功能

1，進入antDesign官網，粘貼table代碼

2，看代碼各個部分實現什么功能，根據需求改代碼

表格類似如下：

代碼如下：

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a href="javascript:;">{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
......

const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', tags: ['nice', 'developer'], }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', tags: ['loser'], },

......
//渲染  看渲染所需數據可知復制這部分代碼即可

ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);

 

 

 

//confirm框

function showConfirm() { confirm({ title: 'Do you Want to delete these items?', content: 'Some descriptions', onOk() { console.log('OK'); }, onCancel() { console.log('Cancel'); }, }); }

//渲染

ReactDOM.render(
  <div>
    <Button onClick={showConfirm}>Confirm</Button>
    <Button onClick={showDeleteConfirm} type="dashed">
      Delete
    </Button>
    <Button onClick={showPropsConfirm} type="dashed">
      With extra props
    </Button>
  </div>,
  mountNode,
);