fix: 操作按钮间分隔栏不显示

src/routes/main/modules/appManagement/deploy.js

@@ -4,49 +4,13 @@
  */
 import React from 'react';
 import QRcode from 'qrcode';
-import { Button, Table, Popconfirm, Modal } from 'antd';
+import { Button, Table, Popconfirm, Modal, Divider } from 'antd';
 import config from '../../../../utils/config';
 import { encrypt } from '../../../../utils/helper';
 import styles from './list.less';
 import { thisPush } from '../../../../services/route';
 
 class Deploy extends React.Component {
-  static makeColumns() {
-    return [{
-      title: 'ID',
-      dataIndex: 'id',
-    }, {
-      title: '更新时间',
-      dataIndex: 'updateTime',
-    }, {
-      title: '状态',
-      dataIndex: 'status',
-    }, {
-      title: '版本号',
-      dataIndex: 'versionNumber',
-    }, {
-      title: '描述',
-      dataIndex: 'description',
-    }, {
-      title: 'uri',
-      dataIndex: 'uri',
-    }, {
-      title: '操作',
-      dataIndex: 'operation',
-      render: (text, record, index) => (
-        <span>
-          <span className="ant-divider" />
-          <a onClick={() => this.onEdit(record, index)}>Edit</a>
-          <span className="ant-divider" />
-          <Popconfirm title="确定删除？" okText="Yes" cancelText="No" onConfirm={() => this.onDelete(record, index)}>
-            <a>Delete</a>
-          </Popconfirm>
-          <span className="ant-divider" />
-          <a onClick={() => this.onQrcode(record, index)}>qrcode</a>
-        </span>
-      ),
-    }];
-  }
   state = {
     urls: '',
     visible: false,
@@ -97,6 +61,42 @@ class Deploy extends React.Component {
       visible: false,
     });
   };
+  makeColumns = () => {
+    return [{
+      title: 'ID',
+      dataIndex: 'id',
+    }, {
+      title: '更新时间',
+      dataIndex: 'updateTime',
+    }, {
+      title: '状态',
+      dataIndex: 'status',
+    }, {
+      title: '版本号',
+      dataIndex: 'versionNumber',
+    }, {
+      title: '描述',
+      dataIndex: 'description',
+    }, {
+      title: 'uri',
+      dataIndex: 'uri',
+    }, {
+      title: '操作',
+      dataIndex: 'operation',
+      render: (text, record, index) => (
+        <span>
+          <Divider type="vertical" />
+          <a onClick={() => this.onEdit(record, index)}>Edit</a>
+          <Divider type="vertical" />
+          <Popconfirm title="确定删除？" okText="Yes" cancelText="No" onConfirm={() => this.onDelete(record, index)}>
+            <a>Delete</a>
+          </Popconfirm>
+          <Divider type="vertical" />
+          <a onClick={() => this.onQrcode(record, index)}>qrcode</a>
+        </span>
+      ),
+    }];
+  };
   render() {
     const { allAppInfo } = this.props.appInfo;
     const { urls, visible, completeUrl } = this.state;
@@ -125,7 +125,7 @@ class Deploy extends React.Component {
             <Button type="primary" icon="plus" onClick={this.onClick}>新增</Button>
           </div>
           <div className={styles.divTable}>
-            <Table columns={Deploy.makeColumns()} dataSource={data} />
+            <Table columns={this.makeColumns()} dataSource={data} />
           </div>
           <div>
             <Modal

src/routes/main/modules/appManagement/edit.js

@@ -16,7 +16,7 @@ class Edit extends React.Component {
         this.props.dispatch({ type: 'appInfo/editAppInfo', payload: { values } });
       }
     });
-  }
+  };
   render() {
     const { value } = this.props.location.state;
     const { getFieldDecorator } = this.props.form;

src/routes/main/modules/appManagement/list.js

 import React from 'react';
-import { Button, Table, Popconfirm } from 'antd';
+import { Button, Table, Popconfirm, Divider } from 'antd';
 import styles from './list.less';
 import { thisPush } from '../../../../services/route';
 
 class List extends React.Component {
-  static makeColumns() {
+  componentDidMount() {
+    this.props.dispatch({ type: 'appInfo/getAppInfo', payload: { name: '' } });
+  }
+  onDelete = (record) => {
+    const name = record.name;
+    this.props.dispatch({ type: 'appInfo/delAppInfo', payload: { name } });
+  };
+  onEdit = (record) => {
+    thisPush(this, { pathname: '../edit', state: { value: record } });
+  };
+  onDeploy = (record) => {
+    thisPush(this, { pathname: '../deploy', state: { value: record } });
+    this.props.dispatch({ type: 'appInfo/saveRecord', payload: { record } });
+  };
+  onClick = () => {
+    thisPush(this, { pathname: '../add', state: { value: '' } });
+  };
+  makeColumns = () => {
     return [{
       title: '创建时间',
       dataIndex: 'createTime',
@@ -22,34 +39,17 @@ class List extends React.Component {
       dataIndex: 'operation',
       render: (text, record, index) => (
         <span>
-          <span className="ant-divider" />
+          <Divider type="vertical" />
           <a onClick={() => this.onEdit(record, index)}>Edit</a>
-          <span className="ant-divider" />
+          <Divider type="vertical" />
           <Popconfirm title="确定删除？" okText="Yes" cancelText="No" onConfirm={() => this.onDelete(record, index)}>
             <a>Delete</a>
           </Popconfirm>
-          <span className="ant-divider" />
+          <Divider type="vertical" />
           <a onClick={() => this.onDeploy(record, index)}>deploy</a>
         </span>
       ),
     }];
-  }
-  componentDidMount() {
-    this.props.dispatch({ type: 'appInfo/getAppInfo', payload: { name: '' } });
-  }
-  onDelete = (record) => {
-    const name = record.name;
-    this.props.dispatch({ type: 'appInfo/delAppInfo', payload: { name } });
-  };
-  onEdit = (record) => {
-    thisPush(this, { pathname: '../edit', state: { value: record } });
-  };
-  onDeploy = (record) => {
-    thisPush(this, { pathname: '../deploy', state: { value: record } });
-    this.props.dispatch({ type: 'appInfo/saveRecord', payload: { record } });
-  };
-  onClick = () => {
-    thisPush(this, { pathname: '../add', state: { value: '' } });
   };
   render() {
     const { allAppInfo } = this.props.appInfo;
@@ -70,7 +70,7 @@ class List extends React.Component {
             <Button type="primary" icon="plus" onClick={this.onClick}>添加</Button>
           </div>
           <div className={styles.divTable}>
-            <Table columns={List.makeColumns()} dataSource={data} />
+            <Table columns={this.makeColumns()} dataSource={data} />
           </div>
         </div>
       </div>