diff --git a/src/components/detail/table/index.tsx b/src/components/detail/table/index.tsx
index d8c399a3e1dff976f8944394b769a97dc308b06c..46a6e9e18a48da036487e646deb3a6f62676d0cd 100644
--- a/src/components/detail/table/index.tsx
+++ b/src/components/detail/table/index.tsx
@@ -1,19 +1,16 @@
 import React from 'react'
 import queryString from 'query-string'
+import { cloneDeep, get, set } from 'lodash'
 import { getParam, getParamText, getValue } from '../../../util/value'
-import { getBoolean } from '../../../util/value'
-import { DetailField, DetailFieldConfig, DetailFieldError, IDetailField } from '../common'
+import { DetailField, DetailFieldConfig, IDetailField, DetailFieldProps } from '../common'
 import getALLComponents, { ColumnConfigs } from '../../tableColumns'
 import CCMS, { CCMSConfig } from '../../../main'
 import InterfaceHelper, { InterfaceConfig } from '../../../util/interface'
 import ConditionHelper, { ConditionConfig } from '../../../util/condition'
 import { ParamConfig } from '../../../interface'
-import { DetailFieldProps } from '../common'
-import { cloneDeep, get, set } from 'lodash'
 import ColumnStyleComponent from './common/columnStyle'
 import Column from '../../tableColumns/common'
 
-
 export interface TableFieldConfig extends DetailFieldConfig {
   type: 'table'
   primary: string
@@ -29,7 +26,6 @@ export interface TableFieldConfig extends DetailFieldConfig {
   }
 }
 
-
 /**
  * 表格步骤-菜单配置
  */
@@ -74,7 +70,7 @@ export interface TableCCMSOperationConfig {
   target: 'current' | 'page' | 'open' | 'handle'
   targetURL: string
   data: { [key: string]: ParamConfig }
-  params?: { field: string, data: ParamConfig }[]
+  params?: { field: string; data: ParamConfig }[]
   callback?: boolean
   debug?: boolean
 }
@@ -83,7 +79,7 @@ export interface TableLinkOperationConfig {
   type: 'link'
   target: '_blank' | '_self'
   targetURL: string
-  params?: { field: string, data: ParamConfig }[]
+  params?: { field: string; data: ParamConfig }[]
   callback?: boolean
   debug?: boolean
 }
@@ -96,7 +92,7 @@ interface TableOperationCheckConfig {
 interface TableOperationConfirmConfig {
   enable: true
   titleText: string
-  titleParams?: Array<{ field: string, data: ParamConfig }>
+  titleParams?: Array<{ field: string; data: ParamConfig }>
   okText: string
   cancelText: string
 }
@@ -238,17 +234,24 @@ export interface ITableField {
   }
 }
 
-export default class TableField extends DetailField<TableFieldConfig, ITableField, string, TableState> implements IDetailField<string> {
+export default class TableField
+  extends DetailField<TableFieldConfig, ITableField, string, TableState>
+  implements IDetailField<string>
+{
   CCMS = CCMS
+
   getALLComponents = (type: any): typeof Column => getALLComponents[type]
+
   interfaceHelper = new InterfaceHelper()
+
   /**
    * 页面权限获取状态
    * fulfilled ｜pending
    */
   pageAuth: { [page: string]: boolean } = {}
+
   /* 服务端分页情况下页码溢出标识：页码溢出时退回重新请求，此标识符用于防止死循环判断 */
-  pageOverflow: boolean = false
+  pageOverflow = false
 
   constructor(props: DetailFieldProps<TableFieldConfig, any>) {
     super(props)
@@ -274,10 +277,7 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
    * @returns
    */
   handleRowOperation = async (operation: TableOperationConfig, record: { [field: string]: any }) => {
-    const {
-      data,
-      step
-    } = this.props
+    const { data, step } = this.props
     if (operation.check && operation.check.enable) {
       const checkResult = await this.interfaceHelper.request(
         operation.check.interface,
@@ -291,7 +291,9 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
     }
 
     if (operation.confirm && operation.confirm.enable) {
-      const title = operation.confirm.titleParams ? (await getParamText(operation.confirm.titleText, operation.confirm.titleParams, { record, data, step })) : operation.confirm.titleText
+      const title = operation.confirm.titleParams
+        ? await getParamText(operation.confirm.titleText, operation.confirm.titleParams, { record, data, step })
+        : operation.confirm.titleText
       const showConfirm = () => {
         return new Promise((resolve, reject) => {
           if (operation.confirm && operation.confirm.enable) {
@@ -299,8 +301,12 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
               title,
               okText: operation.confirm.okText,
               cancelText: operation.confirm.cancelText,
-              onOk: () => { resolve(true) },
-              onCancel: () => { reject(new Error('用户取消')) }
+              onOk: () => {
+                resolve(true)
+              },
+              onCancel: () => {
+                reject(new Error('用户取消'))
+              }
             })
           }
         })
@@ -330,7 +336,7 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
       }
       if (operation.handle.target === 'current' || operation.handle.target === 'handle') {
         const operationConfig = await this.props.loadPageConfig(operation.handle.page)
-        let obj = {
+        const obj = {
           operation: {
             enable: true,
             target: operation.handle.target,
@@ -346,7 +352,8 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
         const sourceURL = this.props.loadPageURL ? await this.props.loadPageURL(operation.handle.page) : ''
         const { url, query } = queryString.parseUrl(sourceURL, { arrayFormat: 'bracket' })
         const targetURL = operation.handle.targetURL || ''
-        const targetKey = queryString.stringifyUrl({ url, query: { ...query, ...params } }, { arrayFormat: 'bracket' }) || ''
+        const targetKey =
+          queryString.stringifyUrl({ url, query: { ...query, ...params } }, { arrayFormat: 'bracket' }) || ''
         if (this.props.handlePageRedirect) {
           this.props.handlePageRedirect(`${targetURL}${targetKey}`)
         } else {
@@ -356,7 +363,8 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
         const sourceURL = this.props.loadPageFrameURL ? await this.props.loadPageFrameURL(operation.handle.page) : ''
         const { url, query } = queryString.parseUrl(sourceURL, { arrayFormat: 'bracket' })
         const targetURL = operation.handle.targetURL || ''
-        const targetKey = queryString.stringifyUrl({ url, query: { ...query, ...params } }, { arrayFormat: 'bracket' }) || ''
+        const targetKey =
+          queryString.stringifyUrl({ url, query: { ...query, ...params } }, { arrayFormat: 'bracket' }) || ''
         window.open(`${targetURL}${targetKey}`)
       }
     }
@@ -374,9 +382,10 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
           console.log('CCMS debug: operation - operation.handle.type === link', params)
         }
 
-        const targetURL = operation.handle.targetURL
+        const { targetURL } = operation.handle
         const { query } = queryString.parseUrl(targetURL, { arrayFormat: 'bracket' })
-        const targetKey = queryString.stringifyUrl({ url: '', query: { ...query, ...params } }, { arrayFormat: 'bracket' }) || ''
+        const targetKey =
+          queryString.stringifyUrl({ url: '', query: { ...query, ...params } }, { arrayFormat: 'bracket' }) || ''
         const jumpUrl = `${targetURL}${targetKey}`
         if (operation.handle.target === '_blank') {
           window.open(jumpUrl)
@@ -412,62 +421,51 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
     if (!this.pageAuth[page]) {
       this.pageAuth[page] = true
 
-      this.props.checkPageAuth && this.props.checkPageAuth(page).then((auth) => {
-        const pageAuth = cloneDeep(this.state.pageAuth)
-        pageAuth[page] = auth
-        this.setState({ pageAuth })
-      })
+      this.props.checkPageAuth &&
+        this.props.checkPageAuth(page).then((auth) => {
+          const pageAuth = cloneDeep(this.state.pageAuth)
+          pageAuth[page] = auth
+          this.setState({ pageAuth })
+        })
     }
   }
 
-
   /**
    * 渲染 表格
    * @param props
    * @returns
    */
   renderComponent = (props: ITableField) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件。
-      <div style={{ display: 'none' }}>
-      </div>
-    </React.Fragment>
+    return (
+      <>
+        您当前使用的UI版本没有实现Table组件。
+        <div style={{ display: 'none' }} />
+      </>
+    )
   }
 
   renderRowOperationComponent = (props: ITableDetailRowOperation) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationButton部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationButton部分。</>
   }
 
   renderRowOperationButtonComponent = (props: ITableDetailRowOperationButton) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationButton部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationButton部分。</>
   }
 
   renderRowOperationGroupComponent = (props: ITableDetailRowOperationGroup) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationGroup部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationGroup部分。</>
   }
 
   renderRowOperationGroupItemComponent = (props: ITableDetailRowOperationGroupItem) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationGroupItem部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationGroupItem部分。</>
   }
 
   renderRowOperationDropdownComponent = (props: ITableDetailRowOperationGroup) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationDropdown部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationDropdown部分。</>
   }
 
   renderRowOperationDropdownItemComponent = (props: ITableDetailRowOperationGroupItem) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationDropdownItem部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationDropdownItem部分。</>
   }
 
   renderOperationModal = (props: ITableDetailOperationModal) => {
@@ -487,7 +485,6 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
     document.body.appendChild(mask)
   }
 
-
   render = () => {
     const {
       config: {
@@ -497,7 +494,7 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
         primary,
         tableColumns,
         operations,
-        pagination,
+        pagination
         // description
       },
       data,
@@ -519,66 +516,88 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
       pageAuth
     } = this.state
 
-    let getDate = value && Array.isArray(value) ? value : []
+    const getDate = value && Array.isArray(value) ? value : []
     const props: ITableField = {
       title: label,
       primary,
       data: getDate,
-      tableColumns: (tableColumns || []).filter((column) => column.field !== undefined && column.field !== '').map((column, index) => {
-        const field = column.field.split('.')[0]
-        return {
-          field,
-          label: column.label,
-          align: column.align,
-          render: (value: any, record: { [field: string]: any }) => {
-            if (value && Object.prototype.toString.call(value) === '[object Object]') {
-              value = getValue(value, column.field.replace(field, '').slice(1))
-            }
-
-            const Column = this.getALLComponents(column.type)
-            if (Column) {
-              const addfix = ['multirowText'].some((val) => val !== column.field)
-              return <ColumnStyleComponent key={index} style={column.style} addfix={addfix} >
-                <Column
-                  ref={() => { }}
-                  record={record}
-                  value={value}
-                  data={data}
-                  step={step}
-                  config={column}
-                  table={this}
-                  baseRoute={this.props.baseRoute}
-                  loadDomain={async (domain: string) => await this.props.loadDomain(domain)}
-                />
-              </ColumnStyleComponent>
+      tableColumns: (tableColumns || [])
+        .filter((column) => column.field !== undefined && column.field !== '')
+        .map((column, index) => {
+          const field = column.field.split('.')[0]
+          return {
+            field,
+            label: column.label,
+            align: column.align,
+            render: (value: any, record: { [field: string]: any }) => {
+              if (value && Object.prototype.toString.call(value) === '[object Object]') {
+                value = getValue(value, column.field.replace(field, '').slice(1))
+              }
+
+              const Column = this.getALLComponents(column.type)
+              if (Column) {
+                const addfix = ['multirowText'].some((val) => val !== column.field)
+                return (
+                  <ColumnStyleComponent key={index} style={column.style} addfix={addfix}>
+                    <Column
+                      ref={() => {}}
+                      record={record}
+                      value={value}
+                      data={data}
+                      step={step}
+                      config={column}
+                      table={this}
+                      baseRoute={this.props.baseRoute}
+                      onUnmount={this.props.onUnmount}
+                      checkPageAuth={this.props.checkPageAuth}
+                      loadPageURL={this.props.loadPageURL}
+                      loadPageFrameURL={this.props.loadPageFrameURL}
+                      loadPageConfig={this.props.loadPageConfig}
+                      loadPageList={this.props.loadPageList}
+                      loadDomain={async (domain: string) => await this.props.loadDomain(domain)}
+                    />
+                  </ColumnStyleComponent>
+                )
+              }
             }
           }
-        }
-      })
+        })
     }
     if (pagination && pagination.mode === 'server') {
-      const paginationCurrent = Number((pagination.current === undefined || pagination.current === '') ? step : get(step, pagination.current, 1))
-      const paginationPageSize = Number((pagination.pageSize === undefined || pagination.pageSize === '') ? step : get(step, pagination.pageSize, 10))
-      const paginationTotal = Number((pagination.total === undefined || pagination.total === '') ? step : get(step, pagination.total, 0))
+      const paginationCurrent = Number(
+        pagination.current === undefined || pagination.current === '' ? step : get(step, pagination.current, 1)
+      )
+      const paginationPageSize = Number(
+        pagination.pageSize === undefined || pagination.pageSize === '' ? step : get(step, pagination.pageSize, 10)
+      )
+      const paginationTotal = Number(
+        pagination.total === undefined || pagination.total === '' ? step : get(step, pagination.total, 0)
+      )
 
       props.pagination = {
         current: Number.isNaN(paginationCurrent) ? 1 : paginationCurrent,
         pageSize: Number.isNaN(paginationPageSize) ? 10 : paginationPageSize,
         total: Number.isNaN(paginationTotal) ? 0 : paginationTotal,
         onChange: (page, pageSize) => {
-          this.props.onUnmount && this.props.onUnmount(true, {
-            [pagination.current || '']: page,
-            [pagination.pageSize || '']: pageSize
-          })
+          this.props.onUnmount &&
+            this.props.onUnmount(true, {
+              [pagination.current || '']: page,
+              [pagination.pageSize || '']: pageSize
+            })
         }
       }
 
-      if (!this.pageOverflow && props.pagination.current > 1 && (props.pagination.current - 1) * props.pagination.pageSize >= props.pagination.total) {
+      if (
+        !this.pageOverflow &&
+        props.pagination.current > 1 &&
+        (props.pagination.current - 1) * props.pagination.pageSize >= props.pagination.total
+      ) {
         this.pageOverflow = true
-        this.props.onUnmount && this.props.onUnmount(true, {
-          [pagination.current || '']: 1,
-          [pagination.pageSize || '']: props.pagination.pageSize
-        })
+        this.props.onUnmount &&
+          this.props.onUnmount(true, {
+            [pagination.current || '']: 1,
+            [pagination.pageSize || '']: props.pagination.pageSize
+          })
       }
     }
 
@@ -606,13 +625,16 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
                       {hidden
                         ? null
                         : this.renderRowOperationButtonComponent({
-                          label: operation.label,
-                          level: operation.level || 'normal',
-                          onClick: async () => { await this.handleRowOperation(operation, record) }
-                        })}
+                            label: operation.label,
+                            level: operation.level || 'normal',
+                            onClick: async () => {
+                              await this.handleRowOperation(operation, record)
+                            }
+                          })}
                     </React.Fragment>
                   )
-                } else if (operation.type === 'group') {
+                }
+                if (operation.type === 'group') {
                   return (
                     <React.Fragment key={index}>
                       {this.renderRowOperationGroupComponent({
@@ -631,15 +653,18 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
                           return hidden
                             ? null
                             : this.renderRowOperationGroupItemComponent({
-                              label: operation.label,
-                              level: operation.level || 'normal',
-                              onClick: async () => { await this.handleRowOperation(operation, record) }
-                            })
+                                label: operation.label,
+                                level: operation.level || 'normal',
+                                onClick: async () => {
+                                  await this.handleRowOperation(operation, record)
+                                }
+                              })
                         })
                       })}
                     </React.Fragment>
                   )
-                } else if (operation.type === 'dropdown') {
+                }
+                if (operation.type === 'dropdown') {
                   return (
                     <React.Fragment key={index}>
                       {this.renderRowOperationDropdownComponent({
@@ -658,108 +683,105 @@ export default class TableField extends DetailField<TableFieldConfig, ITableFiel
                           return hidden
                             ? null
                             : this.renderRowOperationDropdownItemComponent({
-                              label: operation.label,
-                              level: operation.level || 'normal',
-                              onClick: async () => { await this.handleRowOperation(operation, record) }
-                            })
+                                label: operation.label,
+                                level: operation.level || 'normal',
+                                onClick: async () => {
+                                  await this.handleRowOperation(operation, record)
+                                }
+                              })
                         })
                       })}
                     </React.Fragment>
                   )
-                } else {
-                  return <React.Fragment></React.Fragment>
                 }
+                return <></>
               })
             })
-          } else {
-            return <React.Fragment></React.Fragment>
           }
+          return <></>
         }
       })
     }
 
-    const CCMS = this.CCMS
+    const { CCMS } = this
     return (
-      <React.Fragment>
+      <>
         {this.renderComponent(props)}
-        {operationEnable && (
-          operationTarget === 'current'
-            ? (
-              this.renderOperationModal({
-                title: operationTitle,
-                width: '500',
-                visible: operationVisible,
-                children: (
-                  <CCMS
-                    checkPageAuth={this.props.checkPageAuth}
-                    loadPageURL={this.props.loadPageURL}
-                    loadPageFrameURL={this.props.loadPageFrameURL}
-                    loadPageConfig={this.props.loadPageConfig}
-                    loadPageList={this.props.loadPageList}
-                    config={operationConfig}
-                    sourceData={operationData}
-                    baseRoute={this.props.baseRoute}
-                    loadDomain={this.props.loadDomain}
-                    handlePageRedirect={this.props.handlePageRedirect}
-                    onMount={() => {
-                      const { operation } = this.state
-                      operation.visible = true
-                      this.setState({ operation })
-                    }}
-                    callback={() => {
-                      const { operation } = this.state
-                      operation.enable = false
-                      operation.visible = false
-                      this.setState({ operation })
-
-                      if ((operationCallback && operationCallback === true) || Boolean(operationCallback)) {
-                        onUnmount && onUnmount(true)
-                      }
-                    }}
-                  />
-                ),
-                onClose: () => {
-                  const { operation } = this.state
-                  operation.enable = false
-                  operation.visible = false
-                  if ((operationCallback && operationCallback === true) || Boolean(operationCallback)) {
-                    onUnmount && onUnmount(true)
-                  }
-                  this.setState({ operation })
+        {operationEnable &&
+          (operationTarget === 'current' ? (
+            this.renderOperationModal({
+              title: operationTitle,
+              width: '500',
+              visible: operationVisible,
+              children: (
+                <CCMS
+                  checkPageAuth={this.props.checkPageAuth}
+                  loadPageURL={this.props.loadPageURL}
+                  loadPageFrameURL={this.props.loadPageFrameURL}
+                  loadPageConfig={this.props.loadPageConfig}
+                  loadPageList={this.props.loadPageList}
+                  config={operationConfig}
+                  sourceData={operationData}
+                  baseRoute={this.props.baseRoute}
+                  loadDomain={this.props.loadDomain}
+                  handlePageRedirect={this.props.handlePageRedirect}
+                  onMount={() => {
+                    const { operation } = this.state
+                    operation.visible = true
+                    this.setState({ operation })
+                  }}
+                  callback={() => {
+                    const { operation } = this.state
+                    operation.enable = false
+                    operation.visible = false
+                    this.setState({ operation })
+
+                    if ((operationCallback && operationCallback === true) || Boolean(operationCallback)) {
+                      onUnmount && onUnmount(true)
+                    }
+                  }}
+                />
+              ),
+              onClose: () => {
+                const { operation } = this.state
+                operation.enable = false
+                operation.visible = false
+                if ((operationCallback && operationCallback === true) || Boolean(operationCallback)) {
+                  onUnmount && onUnmount(true)
                 }
-              })
-            )
-            : (
-              <CCMS
-                config={operationConfig}
-                sourceData={operationData}
-                baseRoute={this.props.baseRoute}
-                checkPageAuth={this.props.checkPageAuth as ((pageID: any) => Promise<boolean>)}
-                loadPageURL={this.props.loadPageURL as (pageID: any) => Promise<string>}
-                loadPageFrameURL={this.props.loadPageFrameURL as (pageID: any) => Promise<string>}
-                loadPageConfig={this.props.loadPageConfig as (pageID: any) => Promise<CCMSConfig>}
-                loadPageList={this.props.loadPageList}
-                loadDomain={this.props.loadDomain}
-                handlePageRedirect={this.props.handlePageRedirect}
-                onMount={() => {
-                  const { operation } = this.state
-                  operation.visible = true
-                  this.setState({ operation })
-                }}
-                callback={() => {
-                  const { operation } = this.state
-                  operation.enable = false
-                  operation.visible = false
-                  this.setState({ operation })
-
-                  if ((operationCallback && operationCallback === true) || Boolean(operationCallback)) {
-                    onUnmount && onUnmount(true)
-                  }
-                }}
-              />
-            )
-        )}
-      </React.Fragment >
+                this.setState({ operation })
+              }
+            })
+          ) : (
+            <CCMS
+              config={operationConfig}
+              sourceData={operationData}
+              baseRoute={this.props.baseRoute}
+              checkPageAuth={this.props.checkPageAuth as (pageID: any) => Promise<boolean>}
+              loadPageURL={this.props.loadPageURL as (pageID: any) => Promise<string>}
+              loadPageFrameURL={this.props.loadPageFrameURL as (pageID: any) => Promise<string>}
+              loadPageConfig={this.props.loadPageConfig as (pageID: any) => Promise<CCMSConfig>}
+              loadPageList={this.props.loadPageList}
+              loadDomain={this.props.loadDomain}
+              handlePageRedirect={this.props.handlePageRedirect}
+              onMount={() => {
+                const { operation } = this.state
+                operation.visible = true
+                this.setState({ operation })
+              }}
+              callback={() => {
+                const { operation } = this.state
+                operation.enable = false
+                operation.visible = false
+                this.setState({ operation })
+
+                if ((operationCallback && operationCallback === true) || Boolean(operationCallback)) {
+                  onUnmount && onUnmount(true)
+                }
+              }}
+            />
+          ))}
+      </>
     )
   }
 }
diff --git a/src/components/tableColumns/common.tsx b/src/components/tableColumns/common.tsx
index 9d283d0cd8e10c86b27280c6c4ecaaa21e415035..f8c3601ee5e9e792ab296ad32ad2aeb7de244a6f 100644
--- a/src/components/tableColumns/common.tsx
+++ b/src/components/tableColumns/common.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
 import { componentType } from '.'
+import { CCMSConfig, PageListItem } from '../../main'
 
 export interface ColumnConfig extends componentType {
   field: string
-  label: string,
-  align: 'left' | 'center' | 'right',
-  defaultValue?: string,
+  label: string
+  align: 'left' | 'center' | 'right'
+  defaultValue?: string
   style?: {
     color?: string
     fontSize?: number
@@ -27,19 +28,28 @@ export interface ColumnProps<T, V = any> {
   ref: (instance: Column<T, any> | null) => void
   record: { [field: string]: any }
   value: V
-  data: any[],
-  step: { [field: string]: any },
-  config: T,
+  data: any[]
+  step: { [field: string]: any }
+  config: T
   // 挂载引用
   table?: React.ReactNode
   baseRoute: string
+  onUnmount: (reload?: boolean, data?: any) => Promise<void>
+  checkPageAuth: (pageID: any) => Promise<boolean>
+  loadPageURL: (pageID: any) => Promise<string>
+  loadPageConfig: (pageID: any) => Promise<CCMSConfig>
+  handlePageRedirect?: (path: string, replaceHistory: boolean) => void
+  loadPageFrameURL: (pageID: any) => Promise<string>
+  loadPageList: () => Promise<Array<PageListItem>>
   loadDomain: (domain: string) => Promise<string>
 }
 
-interface ColumnState {
-}
+interface ColumnState {}
 
-export default class Column<T, E, V = any> extends React.Component<ColumnProps<T, V>, ColumnState> implements IColumn<V> {
+export default class Column<T, E, V = any>
+  extends React.Component<ColumnProps<T, V>, ColumnState>
+  implements IColumn<V>
+{
   constructor(props: ColumnProps<T>) {
     super(props)
     this.state = {}
@@ -54,12 +64,10 @@ export default class Column<T, E, V = any> extends React.Component<ColumnProps<T
   }
 
   renderComponent = (props: E) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Column组件。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Column组件。</>
   }
 
-  render = () => {
-    return (<></>)
+  render() {
+    return <></>
   }
 }
diff --git a/src/components/tableColumns/index.tsx b/src/components/tableColumns/index.tsx
index ff52f9443bb24c2fdad21024a94272d152b7e250..0979dc643bc96e58b729a01fba77c413c9529f05 100644
--- a/src/components/tableColumns/index.tsx
+++ b/src/components/tableColumns/index.tsx
@@ -1,4 +1,3 @@
-
 import TextColumn, { TextColumnConfig } from './text'
 import EnumColumn, { EnumColumnConfig } from './enum'
 import NumberColumn, { NumberColumnConfig } from './number'
@@ -8,9 +7,11 @@ import DatetimeRangeColumn, { DatetimeRangeColumnConfig } from './datetimeRange'
 import MultirowColumn, { MultirowColumnConfig } from './multirowText'
 import ImageColumn, { ImageColumnConfig } from './image'
 import CustomColumn, { CustomColumnConfig } from './custom'
+import OperatoinColumn, { OperationColumnConfig } from './operation'
 
 export interface componentType {
-    type: 'text'
+  type:
+    | 'text'
     | 'number'
     | 'numberRange'
     | 'datetime'
@@ -19,17 +20,21 @@ export interface componentType {
     | 'multirowText'
     | 'image'
     | 'custom'
+    | 'operation'
 }
 
-export type ColumnConfigs = TextColumnConfig
-    | MultirowColumnConfig
-    | DatetimeColumnConfig
-    | DatetimeRangeColumnConfig
-    | EnumColumnConfig
-    | NumberColumnConfig
-    | NumberRangeColumnConfig
-    | ImageColumnConfig
-    | CustomColumnConfig
+export type ColumnConfigs =
+  | TextColumnConfig
+  | MultirowColumnConfig
+  | DatetimeColumnConfig
+  | DatetimeRangeColumnConfig
+  | EnumColumnConfig
+  | NumberColumnConfig
+  | NumberRangeColumnConfig
+  | ImageColumnConfig
+  | CustomColumnConfig
+  | CustomColumnConfig
+  | OperationColumnConfig
 
 export default {
   text: TextColumn,
@@ -40,5 +45,6 @@ export default {
   number: NumberColumn,
   numberRange: NumberRangeColumn,
   image: ImageColumn,
-  custom: CustomColumn
+  custom: CustomColumn,
+  operation: OperatoinColumn
 }
diff --git a/src/components/tableColumns/operation/index.tsx b/src/components/tableColumns/operation/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..91a5e36782702f09db594ea2a1749ed03c86d3d1
--- /dev/null
+++ b/src/components/tableColumns/operation/index.tsx
@@ -0,0 +1,168 @@
+import React from 'react'
+import { cloneDeep } from 'lodash'
+import Column, { ColumnConfig } from '../common'
+import CCMS from '../../../main'
+import OperationHelper, { OperationConfig } from '../../../util/operation'
+
+/**
+ * 表格操作配置项
+ * - type: 操作类型
+ * - actions: 操作按钮配置
+ */
+export interface OperationColumnConfig extends ColumnConfig {
+  type: 'operation'
+  actions: Array<ActionConfig> | []
+}
+
+type ActionConfig = ActionButtonConfig | ActionLinkConfig
+
+export interface ActionButtonConfig {
+  type: 'button' // to do group(按钮组)、dropdown(下拉按钮)、dropLink(下拉链接)
+  label: string
+  level: 'normal' | 'primary' | 'danger'
+  handle: OperationConfig
+}
+
+export interface ActionLinkConfig {
+  type: 'link'
+  label: string
+  level: 'normal' | 'primary' | 'danger'
+  handle: OperationConfig
+}
+
+export interface IButtonProps {
+  label: string
+  level: 'normal' | 'primary' | 'danger'
+  onClick: () => void
+}
+
+export interface IOperationColumn {
+  actions: Array<React.ReactNode>
+}
+
+export default class OperationColumn extends Column<OperationColumnConfig, IOperationColumn> {
+  OperationHelper = OperationHelper
+
+  renderComponent = (props: IOperationColumn) => {
+    return <>您当前使用的UI版本没有实现OperationColumn组件。</>
+  }
+
+  /**
+   * button组件
+   * @param props
+   */
+  renderButtonComponent = (props: IButtonProps) => {
+    return <>您当前使用的UI版本没有实现OperationColumn的Button组件。</>
+  }
+
+  /**
+   * link组件
+   * @param props
+   */
+  renderLinkComponent = (props: IButtonProps) => {
+    return <>您当前使用的UI版本没有实现OperationColumn的link组件。</>
+  }
+
+  state = {
+    pageAuth: {}
+  }
+
+  /**
+   * 页面权限获取状态
+   * fulfilled ｜pending
+   */
+  pageAuth: { [page: string]: boolean } = {}
+
+  checkPageAuth = (page: string) => {
+    if (!this.pageAuth[page]) {
+      this.pageAuth[page] = true
+      this.props.checkPageAuth(page).then((auth) => {
+        const pageAuth = cloneDeep(this.state.pageAuth)
+        pageAuth[page] = auth
+        this.setState({ pageAuth })
+      })
+    }
+  }
+
+  getValue = () => {
+    const {
+      value,
+      config: { defaultValue }
+    } = this.props
+
+    if (value === undefined || value === null || value === '') {
+      return defaultValue !== undefined ? defaultValue : ''
+    }
+    return value
+  }
+
+  /**
+   * 处理按钮列表按钮项回调
+   * @param action 按钮项配置
+   */
+  handleCallback = async (action: ActionConfig, success: boolean) => {}
+
+  render = () => {
+    const {
+      record,
+      data,
+      step,
+      config: { actions }
+    } = this.props
+    const { pageAuth } = this.state
+
+    const value = this.getValue()
+    let actions_
+    if (Object.prototype.toString.call(actions) === '[object Array]') {
+      actions_ = []
+      for (let index = 0, len = actions.length; index < len; index++) {
+        let hidden = false
+        if (actions[index].handle && actions[index].handle.type === 'ccms') {
+          hidden = actions[index].handle.page === undefined || !pageAuth[actions[index].handle.page.toString()]
+          if (actions[index].handle.page !== undefined) {
+            this.checkPageAuth(actions[index].handle.page.toString())
+          }
+          if (hidden) continue
+        }
+        const OperationHelperWrapper = (
+          <this.OperationHelper
+            key={index}
+            config={actions[index].handle}
+            datas={{ record, data, step }}
+            checkPageAuth={this.props.checkPageAuth}
+            loadPageURL={this.props.loadPageURL}
+            loadPageFrameURL={this.props.loadPageFrameURL}
+            loadPageConfig={this.props.loadPageConfig}
+            loadPageList={this.props.loadPageList}
+            baseRoute={this.props.baseRoute}
+            loadDomain={this.props.loadDomain}
+            handlePageRedirect={this.props.handlePageRedirect}
+            callback={async (success) => {
+              await this.handleCallback(actions[index], success)
+            }}
+          >
+            {(onClick) => {
+              if (actions[index].type === 'button') {
+                return this.renderButtonComponent({
+                  label: actions[index].label || value,
+                  level: actions[index].level,
+                  onClick
+                })
+              }
+              if (actions[index].type === 'link') {
+                return this.renderLinkComponent({
+                  label: actions[index].label || value,
+                  level: actions[index].level,
+                  onClick
+                })
+              }
+            }}
+          </this.OperationHelper>
+        )
+        actions_.push(OperationHelperWrapper)
+      }
+    }
+
+    return <> {this.renderComponent({ actions: actions_ })}</>
+  }
+}
diff --git a/src/index.tsx b/src/index.tsx
index c25627c0a2d3701babd80ffb2cf5c4a04f2806d8..f10e3ea90527f5ee79395dcac77730f38ccc68c7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -58,6 +58,7 @@ export { default as MultirowTextColumn } from './components/tableColumns/multiro
 export { default as DatetimeRangeColumn } from './components/tableColumns/datetimeRange'
 export { default as ImageColumn } from './components/tableColumns/image'
 export { default as CustomColumn } from './components/tableColumns/custom'
+export { default as OperationColumn } from './components/tableColumns/operation'
 
 export { default as FetchStep } from './steps/fetch'
 export { default as DetailStep } from './steps/detail'
diff --git a/src/steps/table/index.tsx b/src/steps/table/index.tsx
index b47104ff94c23fe5359d1c485812bd2d161ae3db..752dd570c8b0ae2dec396dcd21b0ddd5cd510cde 100644
--- a/src/steps/table/index.tsx
+++ b/src/steps/table/index.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 import queryString from 'query-string'
+import { cloneDeep, get, set } from 'lodash'
+import marked from 'marked'
 import { getParam, getParamText, getValue } from '../../util/value'
 import getALLComponents, { ColumnConfigs } from '../../components/tableColumns'
 import Column from '../../components/tableColumns/common'
@@ -7,11 +9,9 @@ import Step, { StepConfig, StepProps } from '../common'
 import { ParamConfig } from '../../interface'
 import ColumnStyleComponent from './common/columnStyle'
 import CCMS, { CCMSConfig } from '../../main'
-import { cloneDeep, get, set } from 'lodash'
 import InterfaceHelper, { InterfaceConfig } from '../../util/interface'
 import ConditionHelper, { ConditionConfig } from '../../util/condition'
 import StatementHelper, { StatementConfig } from '../../util/statement'
-import marked from 'marked'
 /**
  * 表格步骤配置文件格式定义
  * - field:   表格列表数据来源字段
@@ -36,7 +36,7 @@ export interface TableConfig extends StepConfig {
     current?: string
     pageSize?: string
     total?: string
-  },
+  }
   description?: {
     type: 'text' | 'tooltip' | 'modal'
     label?: StatementConfig
@@ -104,7 +104,7 @@ export interface TableCCMSOperationConfig {
   targetURL: string
   width: string
   data: { [key: string]: ParamConfig }
-  params?: { field: string, data: ParamConfig }[]
+  params?: { field: string; data: ParamConfig }[]
   callback?: boolean
   closeCallback?: boolean
   debug?: boolean
@@ -114,7 +114,7 @@ export interface TableLinkOperationConfig {
   type: 'link'
   target: '_blank' | '_self'
   targetURL: string
-  params?: { field: string, data: ParamConfig }[]
+  params?: { field: string; data: ParamConfig }[]
   callback?: boolean
   debug?: boolean
 }
@@ -127,7 +127,7 @@ interface TableOperationCheckConfig {
 interface TableOperationConfirmConfig {
   enable: true
   titleText: string
-  titleParams?: Array<{ field: string, data: ParamConfig }>
+  titleParams?: Array<{ field: string; data: ParamConfig }>
   okText: string
   cancelText: string
 }
@@ -156,7 +156,7 @@ export interface ITable {
   }
   tableOperations: React.ReactNode | null
   leftTableOperations: React.ReactNode | null
-  multirowOperations: React.ReactNode | null,
+  multirowOperations: React.ReactNode | null
   description?: DescriptionConfig
 }
 
@@ -261,7 +261,7 @@ export interface ITableStepOperationModal {
   modalWidthValue?: string | number
 }
 
-interface TableState {
+export interface TableState {
   operation: {
     enable: boolean
     target: 'current' | 'handle'
@@ -274,7 +274,6 @@ interface TableState {
     data: any
     callback?: boolean
     closeCallback?: boolean
-
   }
   pageAuth: { [page: string]: boolean }
 }
@@ -284,15 +283,19 @@ interface TableState {
  */
 export default class TableStep extends Step<TableConfig, TableState> {
   CCMS = CCMS
+
   getALLComponents = (type: any): typeof Column => getALLComponents[type]
+
   interfaceHelper = new InterfaceHelper()
+
   /**
    * 页面权限获取状态
    * fulfilled ｜pending
    */
   pageAuth: { [page: string]: boolean } = {}
+
   /* 服务端分页情况下页码溢出标识：页码溢出时退回重新请求，此标识符用于防止死循环判断 */
-  pageOverflow: boolean = false
+  pageOverflow = false
 
   constructor(props: StepProps<TableConfig>) {
     super(props)
@@ -322,10 +325,7 @@ export default class TableStep extends Step<TableConfig, TableState> {
    * @returns
    */
   handleRowOperation = async (operation: TableOperationConfig, record: { [field: string]: any }) => {
-    const {
-      data,
-      step
-    } = this.props
+    const { data, step } = this.props
     if (operation.check && operation.check.enable) {
       const checkResult = await this.interfaceHelper.request(
         operation.check.interface,
@@ -339,7 +339,9 @@ export default class TableStep extends Step<TableConfig, TableState> {
     }
 
     if (operation.confirm && operation.confirm.enable) {
-      const title = operation.confirm.titleParams ? (await getParamText(operation.confirm.titleText, operation.confirm.titleParams, { record, data, step })) : operation.confirm.titleText
+      const title = operation.confirm.titleParams
+        ? await getParamText(operation.confirm.titleText, operation.confirm.titleParams, { record, data, step })
+        : operation.confirm.titleText
       const showConfirm = () => {
         return new Promise((resolve, reject) => {
           if (operation.confirm && operation.confirm.enable) {
@@ -347,8 +349,12 @@ export default class TableStep extends Step<TableConfig, TableState> {
               title,
               okText: operation.confirm.okText,
               cancelText: operation.confirm.cancelText,
-              onOk: () => { resolve(true) },
-              onCancel: () => { reject(new Error('用户取消')) }
+              onOk: () => {
+                resolve(true)
+              },
+              onCancel: () => {
+                reject(new Error('用户取消'))
+              }
             })
           }
         })
@@ -398,21 +404,21 @@ export default class TableStep extends Step<TableConfig, TableState> {
         const sourceURL = await this.props.loadPageURL(operation.handle.page)
         const { url, query } = queryString.parseUrl(sourceURL, { arrayFormat: 'bracket' })
         const targetURL = operation.handle.targetURL || ''
-        const targetKey = queryString.stringifyUrl({ url, query: { ...query, ...params } }, { arrayFormat: 'bracket' }) || ''
+        const targetKey =
+          queryString.stringifyUrl({ url, query: { ...query, ...params } }, { arrayFormat: 'bracket' }) || ''
         if (this.props.handlePageRedirect) {
           this.props.handlePageRedirect(`${targetURL}${targetKey}`, operation.handle?.replaceHistory || false)
+        } else if (operation.handle.replaceHistory) {
+          window.location.replace(`${targetURL}${targetKey}`)
         } else {
-          if (operation.handle.replaceHistory) {
-            window.location.replace(`${targetURL}${targetKey}`)
-          } else {
-            window.location.href = `${targetURL}${targetKey}`
-          }
+          window.location.href = `${targetURL}${targetKey}`
         }
       } else if (operation.handle.target === 'open') {
         const sourceURL = await this.props.loadPageFrameURL(operation.handle.page)
         const { url, query } = queryString.parseUrl(sourceURL, { arrayFormat: 'bracket' })
         const targetURL = operation.handle.targetURL || ''
-        const targetKey = queryString.stringifyUrl({ url, query: { ...query, ...params } }, { arrayFormat: 'bracket' }) || ''
+        const targetKey =
+          queryString.stringifyUrl({ url, query: { ...query, ...params } }, { arrayFormat: 'bracket' }) || ''
         window.open(`${targetURL}${targetKey}`)
       }
     }
@@ -430,9 +436,10 @@ export default class TableStep extends Step<TableConfig, TableState> {
           console.log('CCMS debug: operation - operation.handle.type === link', params)
         }
 
-        const targetURL = operation.handle.targetURL
+        const { targetURL } = operation.handle
         const { query } = queryString.parseUrl(targetURL, { arrayFormat: 'bracket' })
-        const targetKey = queryString.stringifyUrl({ url: '', query: { ...query, ...params } }, { arrayFormat: 'bracket' }) || ''
+        const targetKey =
+          queryString.stringifyUrl({ url: '', query: { ...query, ...params } }, { arrayFormat: 'bracket' }) || ''
         const jumpUrl = `${targetURL}${targetKey}`
         if (operation.handle.target === '_blank') {
           window.open(jumpUrl)
@@ -481,81 +488,55 @@ export default class TableStep extends Step<TableConfig, TableState> {
    * @returns
    */
   renderComponent = (props: ITable) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件。</>
   }
 
   renderRowOperationComponent = (props: ITableStepRowOperation) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationButton部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationButton部分。</>
   }
 
   renderRowOperationButtonComponent = (props: ITableStepRowOperationButton) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationButton部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationButton部分。</>
   }
 
   renderRowOperationGroupComponent = (props: ITableStepRowOperationGroup) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationGroup部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationGroup部分。</>
   }
 
   renderRowOperationGroupItemComponent = (props: ITableStepRowOperationGroupItem) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationGroupItem部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationGroupItem部分。</>
   }
 
   renderRowOperationDropdownComponent = (props: ITableStepRowOperationGroup) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationDropdown部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationDropdown部分。</>
   }
 
   renderRowOperationDropdownItemComponent = (props: ITableStepRowOperationGroupItem) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationDropdownItem部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationDropdownItem部分。</>
   }
 
   renderTableOperationComponent = (props: ITableStepTableOperation) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationButton部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationButton部分。</>
   }
 
   renderTableOperationButtonComponent = (props: ITableStepTableOperationButton) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationButton部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationButton部分。</>
   }
 
   renderTableOperationGroupComponent = (props: ITableStepTableOperationGroup) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationGroup部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationGroup部分。</>
   }
 
   renderTableOperationGroupItemComponent = (props: ITableStepTableOperationGroupItem) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationGroupItem部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationGroupItem部分。</>
   }
 
   renderTableOperationDropdownComponent = (props: ITableStepTableOperationGroup) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationDropdown部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationDropdown部分。</>
   }
 
   renderTableOperationDropdownItemComponent = (props: ITableStepTableOperationGroupItem) => {
-    return <React.Fragment>
-      您当前使用的UI版本没有实现Table组件的OperationDropdownItem部分。
-    </React.Fragment>
+    return <>您当前使用的UI版本没有实现Table组件的OperationDropdownItem部分。</>
   }
 
   renderOperationModal = (props: ITableStepOperationModal) => {
@@ -576,93 +557,90 @@ export default class TableStep extends Step<TableConfig, TableState> {
   }
 
   tableOperations = (tableOperationsList: Array<TableOperationsType>, getDate: Array<{}>) => {
-    const {
-      pageAuth
-    } = this.state
+    const { pageAuth } = this.state
     return tableOperationsList.length > 0
       ? this.renderTableOperationComponent({
-        children: tableOperationsList.map((operation: TableOperationsType, index: number) => {
-          if (operation.type === 'button') {
-            let hidden = false
-            if (operation.handle && operation.handle.type === 'ccms') {
-              hidden = operation.handle.page === undefined || !pageAuth[operation.handle.page.toString()]
-              operation.handle.page !== undefined && this.checkPageAuth(operation.handle.page.toString())
-            }
-
-            return <React.Fragment key={index}>
-              {
-                hidden
-                  ? null
-                  : this.renderTableOperationButtonComponent({
-                    label: operation.label,
-                    level: operation.level || 'normal',
-                    onClick: async () => {
-                      await this.handleRowOperation(operation, getDate)
-                    }
-                  })
+          children: tableOperationsList.map((operation: TableOperationsType, index: number) => {
+            if (operation.type === 'button') {
+              let hidden = false
+              if (operation.handle && operation.handle.type === 'ccms') {
+                hidden = operation.handle.page === undefined || !pageAuth[operation.handle.page.toString()]
+                operation.handle.page !== undefined && this.checkPageAuth(operation.handle.page.toString())
               }
-            </React.Fragment>
-          } else if (operation.type === 'group') {
-            return <React.Fragment key={index}>
-              {this.renderTableOperationGroupComponent({
-                label: operation.label,
-                children: (operation.operations || []).map((operation) => {
-                  let hidden = false
-                  if (operation.handle && operation.handle.type === 'ccms') {
-                    hidden = operation.handle.page === undefined || !pageAuth[operation.handle.page.toString()]
-                    operation.handle.page !== undefined && this.checkPageAuth(operation.handle.page.toString())
-                  }
-                  return hidden
+
+              return (
+                <React.Fragment key={index}>
+                  {hidden
                     ? null
-                    : this.renderTableOperationGroupItemComponent({
-                      label: operation.label,
-                      level: operation.level || 'normal',
-                      onClick: async () => { await this.handleRowOperation(operation, getDate) }
+                    : this.renderTableOperationButtonComponent({
+                        label: operation.label,
+                        level: operation.level || 'normal',
+                        onClick: async () => {
+                          await this.handleRowOperation(operation, getDate)
+                        }
+                      })}
+                </React.Fragment>
+              )
+            }
+            if (operation.type === 'group') {
+              return (
+                <React.Fragment key={index}>
+                  {this.renderTableOperationGroupComponent({
+                    label: operation.label,
+                    children: (operation.operations || []).map((operation) => {
+                      let hidden = false
+                      if (operation.handle && operation.handle.type === 'ccms') {
+                        hidden = operation.handle.page === undefined || !pageAuth[operation.handle.page.toString()]
+                        operation.handle.page !== undefined && this.checkPageAuth(operation.handle.page.toString())
+                      }
+                      return hidden
+                        ? null
+                        : this.renderTableOperationGroupItemComponent({
+                            label: operation.label,
+                            level: operation.level || 'normal',
+                            onClick: async () => {
+                              await this.handleRowOperation(operation, getDate)
+                            }
+                          })
                     })
-                })
-              })}
-            </React.Fragment>
-          } else if (operation.type === 'dropdown') {
-            return <React.Fragment key={index}>
-              {this.renderTableOperationDropdownComponent({
-                label: operation.label,
-                children: (operation.operations || []).map((operation) => {
-                  let hidden = false
-                  if (operation.handle && operation.handle.type === 'ccms') {
-                    hidden = operation.handle.page === undefined || !pageAuth[operation.handle.page.toString()]
-                    operation.handle.page !== undefined && this.checkPageAuth(operation.handle.page.toString())
-                  }
-                  return hidden
-                    ? null
-                    : this.renderTableOperationDropdownItemComponent({
-                      label: operation.label,
-                      level: operation.level || 'normal',
-                      onClick: async () => { await this.handleRowOperation(operation, getDate) }
+                  })}
+                </React.Fragment>
+              )
+            }
+            if (operation.type === 'dropdown') {
+              return (
+                <React.Fragment key={index}>
+                  {this.renderTableOperationDropdownComponent({
+                    label: operation.label,
+                    children: (operation.operations || []).map((operation) => {
+                      let hidden = false
+                      if (operation.handle && operation.handle.type === 'ccms') {
+                        hidden = operation.handle.page === undefined || !pageAuth[operation.handle.page.toString()]
+                        operation.handle.page !== undefined && this.checkPageAuth(operation.handle.page.toString())
+                      }
+                      return hidden
+                        ? null
+                        : this.renderTableOperationDropdownItemComponent({
+                            label: operation.label,
+                            level: operation.level || 'normal',
+                            onClick: async () => {
+                              await this.handleRowOperation(operation, getDate)
+                            }
+                          })
                     })
-                })
-              })}
-            </React.Fragment>
-          } else {
+                  })}
+                </React.Fragment>
+              )
+            }
             return <React.Fragment key={index} />
-          }
+          })
         })
-      })
       : null
   }
 
   render() {
     const {
-      config: {
-        field,
-        label,
-        rowOperationsPosition,
-        width,
-        primary,
-        columns,
-        operations,
-        pagination,
-        description
-      },
+      config: { field, label, rowOperationsPosition, width, primary, columns, operations, pagination, description },
       data,
       step,
       onUnmount
@@ -694,37 +672,111 @@ export default class TableStep extends Step<TableConfig, TableState> {
       width,
       primary,
       data: getDate,
-      columns: (columns || []).filter((column) => column.field !== undefined && column.field !== '').map((column, index) => {
-        const field = column.field.split('.')[0]
-        return {
-          field,
-          label: column.label,
-          align: column.align,
-          render: (value: any, record: { [field: string]: any }) => {
-            if (value && Object.prototype.toString.call(value) === '[object Object]') {
-              value = getValue(value, column.field.replace(field, '').slice(1))
-            }
+      columns: (columns || [])
+        .filter((column) => column.field !== undefined && column.field !== '')
+        .map((column, index) => {
+          const field = column.field.split('.')[0]
+          return {
+            field,
+            label: column.label,
+            align: column.align,
+            render: (value: any, record: { [field: string]: any }) => {
+              if (value && Object.prototype.toString.call(value) === '[object Object]') {
+                value = getValue(value, column.field.replace(field, '').slice(1))
+              }
 
-            const Column = this.getALLComponents(column.type)
-            if (Column) {
-              const addfix = ['multirowText'].some((val) => val !== column.field)
-              return <ColumnStyleComponent key={index} style={column.style} addfix={addfix} >
-                <Column
-                  ref={() => { }}
-                  record={record}
-                  value={value}
-                  data={data}
-                  step={step}
-                  config={column}
-                  table={this}
-                  baseRoute={this.props.baseRoute}
-                  loadDomain={async (domain: string) => await this.props.loadDomain(domain)}
-                />
-              </ColumnStyleComponent>
+              // if (column.type === 'operation' && column.operation) {
+              //   if (column.operation.type === 'button') {
+              //     if (!ConditionHelper(column.operation.condition, { record, data, step })) {
+              //       return null
+              //     }
+
+              //     let hidden = false
+              //     if (column.operation.handle && column.operation.handle.type === 'ccms') {
+              //       hidden =
+              //         column.operation.handle.page === undefined || !pageAuth[column.operation.handle.page.toString()]
+              //       column.operation.handle.page !== undefined &&
+              //         this.checkPageAuth(column.operation.handle.page.toString())
+              //     }
+
+              //     return (
+              //       <React.Fragment key={index}>
+              //         {hidden
+              //           ? null
+              //           : this.renderRowOperationButtonComponent({
+              //               label: column.operation.label,
+              //               level: column.operation.level || 'normal',
+              //               onClick: async () => {
+              //                 await this.handleRowOperation(column.operation, record)
+              //               }
+              //             })}
+              //       </React.Fragment>
+              //     )
+              //   }
+              //   if (column.operation.type === 'group' || column.operation.type === 'dropdown') {
+              //     return (
+              //       <React.Fragment key={index}>
+              //         {this.renderRowOperationDropdownComponent({
+              //           label: column.operation.label,
+              //           children: (column.operation.operations || []).map((operation) => {
+              //             if (!ConditionHelper(column.operation.condition, { record, data, step })) {
+              //               return null
+              //             }
+
+              //             let hidden = false
+              //             if (column.operation.handle && column.operation.handle.type === 'ccms') {
+              //               hidden =
+              //                 column.operation.handle.page === undefined ||
+              //                 !pageAuth[column.operation.handle.page.toString()]
+              //               column.operation.handle.page !== undefined &&
+              //                 this.checkPageAuth(column.operation.handle.page.toString())
+              //             }
+
+              //             return hidden
+              //               ? null
+              //               : this.renderRowOperationDropdownItemComponent({
+              //                   label: column.operation.label,
+              //                   level: column.operation.level || 'normal',
+              //                   onClick: async () => {
+              //                     await this.handleRowOperation(operation, record)
+              //                   }
+              //                 })
+              //           })
+              //         })}
+              //       </React.Fragment>
+              //     )
+              //   }
+              //   return <></>
+              // }
+
+              const Column = this.getALLComponents(column.type)
+              if (Column) {
+                const addfix = ['multirowText'].some((val) => val !== column.field)
+                return (
+                  <ColumnStyleComponent key={index} style={column.style} addfix={addfix}>
+                    <Column
+                      ref={() => {}}
+                      record={record}
+                      value={value}
+                      data={data}
+                      step={step}
+                      config={column}
+                      table={this}
+                      baseRoute={this.props.baseRoute}
+                      onUnmount={this.props.onUnmount}
+                      checkPageAuth={this.props.checkPageAuth}
+                      loadPageURL={this.props.loadPageURL}
+                      loadPageFrameURL={this.props.loadPageFrameURL}
+                      loadPageConfig={this.props.loadPageConfig}
+                      loadPageList={this.props.loadPageList}
+                      loadDomain={async (domain: string) => await this.props.loadDomain(domain)}
+                    />
+                  </ColumnStyleComponent>
+                )
+              }
             }
           }
-        }
-      }),
+        }),
       tableOperations: this.tableOperations(operations?.tableOperations || [], getDate),
       leftTableOperations: this.tableOperations(operations?.leftTableOperations || [], getDate),
       multirowOperations: null
@@ -756,21 +808,47 @@ export default class TableStep extends Step<TableConfig, TableState> {
         const descriptionType = description.mode
         switch (descriptionType) {
           case 'plain':
-            props.description && (props.description.content = StatementHelper(description.content, { data: this.props.data, step: this.props.step }))
+            props.description &&
+              (props.description.content = StatementHelper(description.content, {
+                data: this.props.data,
+                step: this.props.step
+              }))
             break
           case 'markdown':
-            props.description && (props.description.content = <div dangerouslySetInnerHTML={{ __html: marked(StatementHelper(description.content, { data: this.props.data, step: this.props.step })) }}></div>)
+            props.description &&
+              (props.description.content = (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: marked(
+                      StatementHelper(description.content, { data: this.props.data, step: this.props.step })
+                    )
+                  }}
+                />
+              ))
             break
           case 'html':
-            props.description && (props.description.content = <div dangerouslySetInnerHTML={{ __html: StatementHelper(description.content, { data: this.props.data, step: this.props.step }) }}></div>)
+            props.description &&
+              (props.description.content = (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: StatementHelper(description.content, { data: this.props.data, step: this.props.step })
+                  }}
+                />
+              ))
             break
         }
       }
     }
     if (pagination && pagination.mode === 'server') {
-      const paginationCurrent = Number((pagination.current === undefined || pagination.current === '') ? step : get(step, pagination.current, 1))
-      const paginationPageSize = Number((pagination.pageSize === undefined || pagination.pageSize === '') ? step : get(step, pagination.pageSize, 10))
-      const paginationTotal = Number((pagination.total === undefined || pagination.total === '') ? step : get(step, pagination.total, 0))
+      const paginationCurrent = Number(
+        pagination.current === undefined || pagination.current === '' ? step : get(step, pagination.current, 1)
+      )
+      const paginationPageSize = Number(
+        pagination.pageSize === undefined || pagination.pageSize === '' ? step : get(step, pagination.pageSize, 10)
+      )
+      const paginationTotal = Number(
+        pagination.total === undefined || pagination.total === '' ? step : get(step, pagination.total, 0)
+      )
 
       props.pagination = {
         current: Number.isNaN(paginationCurrent) ? 1 : paginationCurrent,
@@ -784,7 +862,11 @@ export default class TableStep extends Step<TableConfig, TableState> {
         }
       }
 
-      if (!this.pageOverflow && props.pagination.current > 1 && (props.pagination.current - 1) * props.pagination.pageSize >= props.pagination.total) {
+      if (
+        !this.pageOverflow &&
+        props.pagination.current > 1 &&
+        (props.pagination.current - 1) * props.pagination.pageSize >= props.pagination.total
+      ) {
         this.pageOverflow = true
         this.props.onUnmount(true, {
           [pagination.current || '']: 1,
@@ -818,13 +900,16 @@ export default class TableStep extends Step<TableConfig, TableState> {
                       {hidden
                         ? null
                         : this.renderRowOperationButtonComponent({
-                          label: operation.label,
-                          level: operation.level || 'normal',
-                          onClick: async () => { await this.handleRowOperation(operation, record) }
-                        })}
+                            label: operation.label,
+                            level: operation.level || 'normal',
+                            onClick: async () => {
+                              await this.handleRowOperation(operation, record)
+                            }
+                          })}
                     </React.Fragment>
                   )
-                } else if (operation.type === 'group' || operation.type === 'dropdown') {
+                }
+                if (operation.type === 'group' || operation.type === 'dropdown') {
                   return (
                     <React.Fragment key={index}>
                       {this.renderRowOperationDropdownComponent({
@@ -843,22 +928,22 @@ export default class TableStep extends Step<TableConfig, TableState> {
                           return hidden
                             ? null
                             : this.renderRowOperationDropdownItemComponent({
-                              label: operation.label,
-                              level: operation.level || 'normal',
-                              onClick: async () => { await this.handleRowOperation(operation, record) }
-                            })
+                                label: operation.label,
+                                level: operation.level || 'normal',
+                                onClick: async () => {
+                                  await this.handleRowOperation(operation, record)
+                                }
+                              })
                         })
                       })}
                     </React.Fragment>
                   )
-                } else {
-                  return <React.Fragment></React.Fragment>
                 }
+                return <></>
               })
             })
-          } else {
-            return <React.Fragment></React.Fragment>
           }
+          return <></>
         }
       }
 
@@ -869,91 +954,88 @@ export default class TableStep extends Step<TableConfig, TableState> {
       }
     }
 
-    const CCMS = this.CCMS
+    const { CCMS } = this
 
     return (
-      <React.Fragment>
+      <>
         {this.renderComponent(props)}
-        {operationEnable && (
-          operationTarget === 'current'
-            ? (
-                this.renderOperationModal({
-                  title: operationTitle,
-                  width: operationWidth,
-                  visible: operationVisible,
-                  modalWidthMode: operationModalWidthMode,
-                  modalWidthValue: operationModalWidthValue,
-                  children: (
-                  <CCMS
-                    config={operationConfig}
-                    sourceData={operationData}
-                    baseRoute={this.props.baseRoute}
-                    checkPageAuth={this.props.checkPageAuth}
-                    loadPageURL={this.props.loadPageURL}
-                    loadPageFrameURL={this.props.loadPageFrameURL}
-                    loadPageConfig={this.props.loadPageConfig}
-                    loadPageList={this.props.loadPageList}
-                    loadDomain={this.props.loadDomain}
-                    handlePageRedirect={this.props.handlePageRedirect}
-                    onMount={() => {
-                      const { operation } = this.state
-                      operation.visible = true
-                      this.setState({ operation })
-                    }}
-                    callback={() => {
-                      const { operation } = this.state
-                      operation.enable = false
-                      operation.visible = false
-                      this.setState({ operation })
-
-                      if ((operationCallback && operationCallback === true) || Boolean(operationCallback)) {
-                        onUnmount(true)
-                      }
-                    }}
-                  />
-                ),
-                onClose: () => {
-                  const { operation } = this.state
-                  operation.enable = false
-                  operation.visible = false
-                  if ((operationcloseCallback && operationcloseCallback === true) || Boolean(operationcloseCallback)) {
-                    onUnmount(true)
-                  }
-                  this.setState({ operation })
+        {operationEnable &&
+          (operationTarget === 'current' ? (
+            this.renderOperationModal({
+              title: operationTitle,
+              width: operationWidth,
+              visible: operationVisible,
+              modalWidthMode: operationModalWidthMode,
+              modalWidthValue: operationModalWidthValue,
+              children: (
+                <CCMS
+                  config={operationConfig}
+                  sourceData={operationData}
+                  baseRoute={this.props.baseRoute}
+                  checkPageAuth={this.props.checkPageAuth}
+                  loadPageURL={this.props.loadPageURL}
+                  loadPageFrameURL={this.props.loadPageFrameURL}
+                  loadPageConfig={this.props.loadPageConfig}
+                  loadPageList={this.props.loadPageList}
+                  loadDomain={this.props.loadDomain}
+                  handlePageRedirect={this.props.handlePageRedirect}
+                  onMount={() => {
+                    const { operation } = this.state
+                    operation.visible = true
+                    this.setState({ operation })
+                  }}
+                  callback={() => {
+                    const { operation } = this.state
+                    operation.enable = false
+                    operation.visible = false
+                    this.setState({ operation })
+
+                    if ((operationCallback && operationCallback === true) || Boolean(operationCallback)) {
+                      onUnmount(true)
+                    }
+                  }}
+                />
+              ),
+              onClose: () => {
+                const { operation } = this.state
+                operation.enable = false
+                operation.visible = false
+                if ((operationcloseCallback && operationcloseCallback === true) || Boolean(operationcloseCallback)) {
+                  onUnmount(true)
                 }
-              })
-            )
-            : (
-              <CCMS
-                config={operationConfig}
-                sourceData={operationData}
-                baseRoute={this.props.baseRoute}
-                checkPageAuth={this.props.checkPageAuth}
-                loadPageURL={this.props.loadPageURL}
-                loadPageFrameURL={this.props.loadPageFrameURL}
-                loadPageConfig={this.props.loadPageConfig}
-                loadPageList={this.props.loadPageList}
-                loadDomain={this.props.loadDomain}
-                handlePageRedirect={this.props.handlePageRedirect}
-                onMount={() => {
-                  const { operation } = this.state
-                  operation.visible = true
-                  this.setState({ operation })
-                }}
-                callback={() => {
-                  const { operation } = this.state
-                  operation.enable = false
-                  operation.visible = false
-                  this.setState({ operation })
-
-                  if ((operationCallback && operationCallback === true) || Boolean(operationCallback)) {
-                    onUnmount(true)
-                  }
-                }}
-              />
-            )
-        )}
-      </React.Fragment >
+                this.setState({ operation })
+              }
+            })
+          ) : (
+            <CCMS
+              config={operationConfig}
+              sourceData={operationData}
+              baseRoute={this.props.baseRoute}
+              checkPageAuth={this.props.checkPageAuth}
+              loadPageURL={this.props.loadPageURL}
+              loadPageFrameURL={this.props.loadPageFrameURL}
+              loadPageConfig={this.props.loadPageConfig}
+              loadPageList={this.props.loadPageList}
+              loadDomain={this.props.loadDomain}
+              handlePageRedirect={this.props.handlePageRedirect}
+              onMount={() => {
+                const { operation } = this.state
+                operation.visible = true
+                this.setState({ operation })
+              }}
+              callback={() => {
+                const { operation } = this.state
+                operation.enable = false
+                operation.visible = false
+                this.setState({ operation })
+
+                if ((operationCallback && operationCallback === true) || Boolean(operationCallback)) {
+                  onUnmount(true)
+                }
+              }}
+            />
+          ))}
+      </>
     )
   }
 }