From 86f08fb9145132c87600079c8d6c6ab2ca736f3e Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Mon, 20 Feb 2017 22:15:34 +0800
Subject: [PATCH] option style

---
 src/components/users/list.js | 39 ++++++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/users/list.js b/src/components/users/list.js
index ffc075d..6120340 100644
--- a/src/components/users/list.js
+++ b/src/components/users/list.js
@@ -1,7 +1,9 @@
 import React from 'react'
-import {Table, Popconfirm} from 'antd'
+import {Table, Dropdown, Button, Menu, Icon, Modal} from 'antd'
 import {TweenOneGroup} from 'rc-tween-one'
 import styles from './list.less'
+const confirm = Modal.confirm
+
 
 class list extends React.Component {
   constructor (props) {
@@ -57,6 +59,20 @@ class list extends React.Component {
     )
   }
 
+  handleMenuClick = (record, e) => {
+  const {onDeleteItem, onEditItem} = this.props
+  if (e.key === '1') {
+    onEditItem(record)
+  } else if (e.key === '2') {
+    confirm({
+      title: '您确定要删除这条记录吗?',
+      onOk () {
+        onDeleteItem(record.id)
+      }
+    })
+  }
+}
+
   onEnd = (e) => {
     e.target.style.height = 'auto'
   }
@@ -122,16 +138,17 @@ class list extends React.Component {
         title: '操作',
         key: 'operation',
         width: 100,
-        render: (text, record) => (
-          <p>
-            <a onClick={() => onEditItem(record)} style={{
-              marginRight: 4
-            }}>编辑</a>
-            <Popconfirm title='确定要删除吗？' onConfirm={() => onDeleteItem(record.id)}>
-              <a>删除</a>
-            </Popconfirm>
-          </p>
-        )
+        render: (text, record) => {
+         return (<Dropdown overlay={<Menu onClick={this.handleMenuClick.bind(null, record)}>
+           <Menu.Item key='1'>编辑</Menu.Item>
+           <Menu.Item key='2'>删除</Menu.Item>
+         </Menu>}>
+           <Button style={{ border: 'none' }}>
+             <Icon style={{ marginRight: 2 }} type='bars' />
+             <Icon type='down' />
+           </Button>
+         </Dropdown>)
+       }
       }
     ]
     return <div>