修改操作样式

xdsjs · Feb 10, 2017 · 64c152f · 64c152f
1 parent 46ff98b
commit 64c152f
Showing 1 changed file with 28 additions and 19 deletions.
diff --git a/src/components/users/list.js b/src/components/users/list.js
@@ -1,7 +1,8 @@
 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) {
@@ -56,19 +57,26 @@ 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'
   }
 
   render () {
-    const {
-      loading,
-      dataSource,
-      pagination,
-      onPageChange,
-      onDeleteItem,
-      onEditItem
-    } = this.props
+    const {loading, dataSource, pagination, onPageChange} = this.props
     const columns = [
       {
         title: '头像',
@@ -117,16 +125,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>)
+        }
       }
     ]
     const self = this