resolver-egretimp-plus 0.1.113 → 0.1.115

package/src-bak/components/packages-web/CustomComponentTable.jsx

@@ -0,0 +1,813 @@
+  
+import { ElAutoResizer, ElPagination, ElTableV2, formContextKey } from 'element-plus'
+import ElTable, { ElTableColumn } from '../table'
+import Renderer from '../../renderer.jsx'
+import { computed, inject, watch, h, ref, reactive, onMounted, unref } from 'vue'
+import { commonPropsType, TABLE_COLUMN_NOT_RENDER_META_TYPE, DISPLAY_SHOW, compareComponet, isPlainObject, hasOwn, cloneDeep, isPromise, isPlainColumn, generateUniqueId, calcDisable, camelize, capitalize, DISPLAY_HIDDEN, definePrivatelyProp, isArray, eleIsOverflow } from '../../utils/index.js'
+import { getCustomerTableProps, tableValidate } from '../helper/table'
+// import '../styles/CustomComponenTable.scss'
+
+export default {
+  inheritAttrs: false,
+  name: 'CustomComponentTable',
+  props: getCustomerTableProps(commonPropsType, ElTableV2, ElTable, ElPagination),
+  setup(props, { expose, attrs, emit }) {
+    // 虚拟表格列的属性 'hidden'不需要这个属性，额外控制
+    const virtualizedColumnPropKeys = ['align', 'class', 'key', 'dataKey', 'fixed', 'flexGrow', 'flexShrink', 'headerClass', 'style', 'sortable', 'title', 'maxWidth', 'minWidth', 'width']
+    // 开启虚拟化表格
+    const isVirtualized = computed(() => {
+      return props.config?.isVirtualized == '1'
+    })
+    const toopTip = reactive({
+      show: false,
+      triggerRef: null,
+      content: ''
+    })
+
+    // let pageSize = 10 // 默认每页5条
+    // if (props.config?.pageSize) {
+    //   pageSize = parseInt(props.config.pageSize) || 5
+    // }
+
+    const defaultPageablePageSize = computed({
+      get() {
+        return parseInt(props.config.defaultPageablePageSize) || 10 // 默认每页5条
+      },
+      set(val) {
+        props.config.defaultPageablePageSize = val
+      }
+    })
+    const pageSize = computed({
+      get() {
+        if (defaultPageable.value) {
+          return defaultPageablePageSize.value
+        }
+        return parseInt(props.config.pageSize) || 5 // 默认每页5条
+      },
+      set(val) {
+        if (defaultPageable.value) {
+          defaultPageablePageSize.value = val
+        }
+        props.config.pageSize = val
+      }
+    })
+    const page = reactive({
+      pageNum: 1,
+      pageSize,
+      total: 0,
+    })
+    
+    // 在数据量超过10的话，默认开启分页功能
+    const defaultPageable = computed(() => {
+      return !(props.config?.frontPageFlag == '1' || props.config?.pageable == '1') && modelValue.value?.length > 10
+    })
+
+    // 开启前端分页
+    const isFrontPage = computed(() => {
+      return (props.config?.frontPageFlag == '1' || defaultPageable.value) && !isVirtualized.value
+    })
+
+    // 是否开启分页功能     ====== start======
+    const pageable = computed(() => {
+      return (isFrontPage.value || props.config?.pageable == '1') && !isVirtualized.value
+    })
+
+    // 分页器布局模式
+    const pageAlign = computed(() => {
+      return props.config?.pageAlign
+    })
+    const PAGE_LEFT = 'left'
+    const PAGE_CENTER = 'center'
+    const PAGE_RIGHT = 'right'
+    const pageAlignEnmu = {
+      [PAGE_LEFT]: 'flex-start',
+      [PAGE_RIGHT]: 'flex-end',
+      [PAGE_CENTER]: 'center'
+    }
+    // 表格是否开启单行可选择配置
+    const selectable = computed(() => {
+      return props.config?.selectable == '1' || props.config?.canSelect
+    })
+    const formContext = inject(formContextKey, undefined)
+    const messageInstance = inject('_messageInstance')
+    const indectModeRef = inject('indectModeRef', ref(''))
+    const ruleExecuter = inject('_ruleExecuter')
+    const dynamicMapComp = inject('dynamicMapComp')
+    const parentRootValue = inject('_parentRootValue', {})
+    const parentDynamicMapComp = inject('_parentDynamicMapComp', {})
+    const selectionsObj = inject('_selectionsObj', {})
+    const rootStore = inject('_rootStore', {})
+    const lang = inject('lang')
+    const rootValue = inject('rootValue')
+    const selects = inject('selects')
+    const modelValue = computed({
+      get() {
+        return props.modelValue
+      },
+      set(val) {
+        emit('update:modelValue', val)
+      }
+    })
+    const tableProps = computed(() => {
+      const tableComp = isVirtualized.value ? ElTableV2 : ElTable
+      const porpsObj =  Object.keys(tableComp.props).reduce((ret, key) => {
+        if (props[key] !== undefined && props[key] !== null) {
+          ret[key] = props[key]
+        }
+        return ret
+      }, {})
+      if (!porpsObj.border) {
+        porpsObj.border = true
+      }
+      if (!porpsObj.stripe) {
+        porpsObj.stripe = true
+      }
+      if (isVirtualized.value) {
+        const oldHeaderClass = porpsObj.headerClass
+        porpsObj.headerClass = function(params) {
+          let ret = 'table-v2-common-row'
+          const oldVal = typeof oldHeaderClass === 'function' ? oldHeaderClass(params) : oldHeaderClass
+          if (oldVal) {
+            ret = `${oldVal} ${ret}`
+          }
+          return ret
+        }
+        const oldRowClass = porpsObj.rowClass
+        porpsObj.rowClass = function(params) {
+          const {rowIndex} = params
+          let ret = 'table-v2-common-row'
+          const oldVal = typeof oldRowClass === 'function' ? oldRowClass(params) : oldRowClass
+          if (oldVal) {
+            ret = `${oldVal} ${ret}`
+          }
+          if (rowIndex % 2 === 1) {
+            ret = `${ret} table-v2-striped`
+          }
+          return ret
+        }
+      }
+      return porpsObj
+    })
+
+    const getCompEvents = (comp) => {
+      let emitKeys = comp.emits || {}
+      if(!Array.isArray(emitKeys)) {
+        emitKeys = Object.keys(emitKeys)
+      }
+      return emitKeys.reduce((ret, key) => {
+        const eventKey = `on${capitalize(camelize(key))}`
+        if (hasOwn(attrs, eventKey)) {
+          ret[eventKey] = attrs[eventKey]
+        }
+        return ret
+      }, {})
+    }
+
+    const tableEvents = computed(() => {
+      const tableComp = isVirtualized.value ? ElTableV2 : ElTable
+      return getCompEvents(tableComp)
+    })
+    const sliceTableEvents = computed(() => {
+      const ret = {
+        ...(tableEvents.value || {})
+      }
+      delete ret.onSortChange
+      return ret
+    })
+    const pagenationEvents = computed(() => {
+      return getCompEvents(ElPagination)
+    })
+
+    const tableColumnFirstMetaCode = ref("")
+    const tableColumnConfigs = computed(() => {
+      let pmPageMetaList = props.config.pmPageMetaList || []
+      return pmPageMetaList.map((config) => {
+        if (
+          config.displayType !== DISPLAY_HIDDEN &&
+          !((props.width == 0 || props.width == '0px' || config.hidden == '1')) &&
+          !tableColumnFirstMetaCode.value
+        ) {
+          tableColumnFirstMetaCode.value = config.metaCode
+        }
+        return normalColumnConfig(config)
+      })
+    })
+    
+    const normalPageTotal = computed(() => {
+      return !isFrontPage.value ? page.total : ((modelValue.value || [])?.length || 0)
+    })
+
+    const normalTableData = computed(() => {
+      return !isFrontPage.value ?
+        (modelValue.value || []) :
+        (modelValue.value || []).slice((page.pageNum - 1) * page.pageSize, page.pageNum * page.pageSize)
+    })
+
+    /** 自定义排序逻辑 ===start==== */
+    const sortObj = ref(null)
+    // "ascending", "descending", null
+    const onSortChange = ({ prop, order }) => {
+      tableEvents.value?.onSortChange?.({ prop, order })
+
+      sortObj.value = null
+      if (order) {
+        sortObj.value = {prop, order}
+      }
+    }
+    const sortTable = computed(() => {
+      if (!sortObj.value) {
+        return []
+      }
+      const sortList = [sortObj.value]
+      const ret = sortList.reduce((ret, item) => {
+        ret = ret.sort((a, b) => {
+          if (a[item.prop] === '' || a[item.prop] === undefined || a[item.prop] === null) {
+            return item.order === 'descending' ? 1 : -1
+          }
+          if (b[item.prop] === '' || b[item.prop] === undefined || b[item.prop] === null) {
+            return item.order === 'descending' ? -1 : 1
+          }
+          let aVal = a[item.prop]
+          let bVal = b[item.prop]
+          if (!Number.isNaN(+(a[item.prop])) && !Number.isNaN(+(b[item.prop]))) {
+            aVal = +(a[item.prop])
+            bVal = +(b[item.prop])
+          }
+          return (aVal > bVal ? (item.order === 'descending' ? -1 : 1) : aVal === bVal ? 0 : (item.order === 'descending' ? 1 : -1))
+        })
+        return ret
+      }, [...(normalTableData.value || [])])
+      return ret
+    })
+
+    const tableData = computed(() => {
+      return sortObj.value ? sortTable.value : normalTableData.value
+    })
+    /** 自定义排序逻辑 ===end==== */
+
+    // 获取表格列的属性配置
+    function getTableColumnProps(config, idx) {
+      const nextList = tableColumnConfigs.value.slice(idx + 1)
+      // 当前config表格列是最后一个显示列，并且后面有hidden的列
+      const isEndConfig = !nextList?.filter(config => {
+        return config.displayType != DISPLAY_HIDDEN && !(config.width == 0 || config.width == '0px' || config.hidden == '1')
+      })?.length
+      const nextConfig = nextList.find(config => config.displayType != DISPLAY_HIDDEN)
+      let columnkeys = virtualizedColumnPropKeys
+      if (!isVirtualized.value) {
+        columnkeys = Object.keys(ElTableColumn.props)
+      }
+      const retObj =  columnkeys.reduce((ret, key) => {
+        if (hasOwn(config, key)) {
+          ret[key] = config[key]
+        }
+        return ret
+      }, {})
+      
+      if (config.columnWidth) {
+        retObj.width = config.columnWidth
+      }
+      if (!retObj.width) {
+        retObj.minWidth = 160
+      }
+      if (retObj.width == 0 || retObj.width == '0px' || config.hidden == '1') {
+        retObj.className = 'hidden-column'
+        retObj.width = 1
+      }
+      if (nextConfig && (nextConfig.width == 0 || nextConfig.width == '0px' || nextConfig.hidden == '1')) {
+        retObj.className = `${retObj.className || ''} next-hidden-column`
+      }
+      if (isEndConfig) {
+        retObj.className = `${retObj.className || ''} end-show-column`
+      }
+      if (config.metaType == 'CustomComponentSelectEmployees') {
+        retObj.className = `${retObj.className || ''} clear-index`
+      }
+      if (!isVirtualized.value) {
+        retObj.className = `${retObj.className} cell-col-ellipsis`
+        if (!retObj.prop) {
+          retObj.prop = config.metaCode
+        }
+        // table设置show-overflow-tooltip额外的逻辑=====start=====
+        if (config.showOverflowTooltip == '1' || config['show-overflow-tooltip'] == '1') {
+          retObj['show-overflow-tooltip'] = true
+          retObj.showOverflowTooltip = true
+        } else {
+          retObj['show-overflow-tooltip'] = false
+          retObj.showOverflowTooltip = false
+        }
+        if (
+          isPlainColumn({...config, isColumn: true}, true) &&
+          config.showOverflowTooltip != '0' &&
+          config['show-overflow-tooltip'] != '0'
+        ) {
+          const showOverflowTooltipFn = (data) => {
+            const currentConfig = multiPmPageMetaList.value?.[data.$index]?.[idx]
+            if (currentConfig) {
+              return isPlainColumn({...currentConfig, isColumn: true}, calcDisable(currentConfig, indectModeRef.value))
+            }
+            return true
+          }
+          retObj['show-overflow-tooltip'] = showOverflowTooltipFn
+          retObj.showOverflowTooltip = showOverflowTooltipFn
+        }
+        // table设置show-overflow-tooltip额外的逻辑=====end=====
+        if (config.type === 'selection') {
+          const orginSelectable = retObj.selectable
+          retObj.selectable = (row, index) => {
+            let orginRet = true
+            if (orginSelectable && typeof orginSelectable === 'function') {
+              orginRet = orginSelectable(row, index, {
+                tableConfig: props.config,
+                rootValue: rootValue,
+                parentRootValue,
+                parentDynamicMapComp
+              })
+            }
+            let parentSelectionsRet = true
+            if (selectionsObj.selections && selectionsObj.selections.length && selectionsObj.primaryKeys && selectionsObj.primaryKeys.length) {
+              const hasRow = selectionsObj.selections?.some(selectRow => {
+                return selectionsObj.primaryKeys.map(key => key && selectRow[key] == row[key]).every(item => item)
+              })
+              parentSelectionsRet = !hasRow
+            }
+            return orginRet && parentSelectionsRet
+          }
+        }
+      }
+
+      if (isVirtualized.value) {
+        let classValue = retObj.className || ''
+        if (retObj.width) {
+          retObj.width = parseInt(retObj.width)
+        } else {
+          retObj.width = 160
+          classValue = `${classValue} flex-grow-import`
+        }
+        retObj.class = `${classValue} table-body-cell`
+        retObj.headerClass = `${classValue} table-head-cell`
+      }
+
+      return retObj
+    }
+
+    // 获取表格的配置，这边会做一下配置转化，表格中的不需要labelWidth
+    function normalColumnConfig(config) {
+      return {
+        ...config,
+        labelHidden: '1'
+      }
+    }
+
+    // 列中是否需要展示render渲染
+    function tableColumnNotRender(config) {
+      if (!config) return true
+      // if (config['show-overflow-tooltip'] || config.showOverflowTooltip) return true
+      // 'selection', 'index' 是el-table属性type中type的两个枚举，这两个直接使用默认效果
+      if (['selection', 'index'].includes(config.type)) {
+        return true
+      }
+      const metaTypeNotRender = TABLE_COLUMN_NOT_RENDER_META_TYPE.some(metaType => compareComponet(metaType, config.metaType)) || !config.metaType
+      return !config.renderby && metaTypeNotRender
+    }
+
+    function getValue(idx) {
+      return tableData.value?.[idx]
+    }
+    function onUpdateModelValue(val, idx) {
+      if (!modelValue.value) {
+        modelValue.value = []
+      }
+      modelValue.value[idx] = val
+    }
+
+    const multiPmPageMetaList = computed(() => {
+      return props.config.multiPmPageMetaList || []
+    })
+
+    /**
+     * 设置 multiPmPageMetaList 的值
+     * multiPmPageMetaList值主要作用是区分列的每一行都需要有单独的config，接口配置返回的只是列的配置，
+     * 所以这边需要单独再坐下处理
+     */
+    const rowColumnConfgsMap = new Map()
+    watch(() => {
+      return tableData?.value?.length
+    }, (length) => {
+      let list = []
+      if (length) {
+        const newVal = tableData.value
+        list = newVal?.map?.((row, idx) => {
+          const columnsCgs = rowColumnConfgsMap.get(row)
+          if (columnsCgs) {
+            columnsCgs.forEach(config => {
+              config.rowIndex = idx
+            })
+            return columnsCgs
+          } else {
+            const retColumnConfigs = tableColumnConfigs.value.map((config, relIdx) => {
+              const ret = cloneDeep(config)
+              if (ret.width && !ret.columnWidth) {
+                ret.columnWidth = ret.width
+                delete ret.width
+              }
+              ret.columnId = generateUniqueId()
+              ret.rowIndex = idx
+              ret.isColumn = true
+              ret.refConfig = props?.config?.pmPageMetaList?.[relIdx]
+              ret.parent = props?.config // 这边手动设置一下，防止组件复用的时候不会刷新，造成parent的丢失
+              return ret
+            })
+            rowColumnConfgsMap.set(row, retColumnConfigs)
+            return retColumnConfigs
+          }
+        })
+      }
+      definePrivatelyProp(props.config, 'multiPmPageMetaList', list)
+    }, {
+      immediate: true,
+      deep: true,
+    })
+    // 统计行定义 ====start======
+    const totalMetaCodes = computed(() => {
+      return props.config?.totalMetaCodes || []
+    })
+    const normalTotalCodes = computed(() => {
+      return totalMetaCodes.value.map(code => {
+        if (typeof code === 'string') {
+          return {
+            code,
+            totalFn: defaultTotalFn
+          }
+        } else {
+          if (isPlainObject(code) && hasOwn(code, 'code')) {
+            code.totalFn = typeof code.totalFn === 'function' ? code.totalFn : defaultTotalFn
+            return code
+          }
+          return null
+        }
+      }).filter(codeInfo => !!codeInfo)
+    })
+    const totalCodeRenders = computed(() => {
+      const defaultTotalObj = {
+        [tableColumnFirstMetaCode.value]: () => {
+          return <div>{lang.value.indexOf('zh') > -1 ? '总计' : 'Total'}</div>
+        }
+      }
+      return normalTotalCodes.value.reduce((ret, codeInfo) => {
+        const { code, render } = codeInfo
+        if (render && typeof render === 'function') {
+          ret[code] = render
+        }
+        return ret
+      }, defaultTotalObj)
+    })
+    function defaultTotalFn(total, val, row) {
+      if (val === undefined || val === null) {
+        val = 0
+        if (val === undefined) {
+          val = ''
+        }
+      } else {
+        const strVal = val.toString()
+        const negativeFlag = /^-/.test(strVal)
+        val = strVal.replace(/[^\d\.]/g, '')
+        if (negativeFlag) {
+          val = `-${val}`
+        }
+      }
+      const numFlag = !isNaN(Number(val))
+      if (total === null || total === undefined) {
+        total = numFlag ? 0 : ''
+      }
+      return total + (numFlag ? Number(val) : val)
+    }
+    const totalRow = computed(() => {
+      if (!tableData.value?.length || !totalMetaCodes.value.length || !normalTotalCodes.value.length) {
+        return []
+      }
+      // 进行统计的计算
+      const row = (tableData.value || []).reduce((total, row) => {
+        normalTotalCodes.value.forEach(codeInfo => {
+          const { code, totalFn } = codeInfo
+          total[code] = totalFn(total[code], row[code], row)
+        })
+        return total
+      }, { totalFlag: true })
+      return [row]
+    })
+    // 统计行定义 ====end======
+
+    // 开启单行选择配置后需要的逻辑=====start=====
+    const selectedRow = ref(null)
+    const currentChange = (row) => {
+      selectedRow.value = row
+      tableEvents?.onCurrentChange?.(row)
+      rootStore.tableSelectedInfo = row
+    }
+    const multipleSelection = ref([])
+    const handleSelectionChange = (val) => {
+      multipleSelection.value = val
+      rootStore.tableSelectedInfo = val
+    }
+    // 开启单行选择配置后需要的逻辑=====end=====
+
+    // 获取分页功能属性
+    const paginationProps = computed(() => {
+      const attrs =  Object.keys(ElPagination.props).reduce((ret, key) => {
+        if (hasOwn(props.config, key)) {
+          ret[key] = props.config[key]
+        }
+        return ret
+      }, {})
+      if (!hasOwn(attrs, 'background')) {
+        attrs.background = true
+      }
+      if (!hasOwn(attrs, 'layout')) {
+        attrs.layout = 'prev, pager, next, jumper, sizes, total'
+      }
+      if (!hasOwn(attrs, 'page-sizes') && !hasOwn(attrs, 'pageSizes')) {
+        attrs.pageSizes = [5, 10, 20, 40]
+      }
+      return attrs
+    })
+    
+    // 页码变动
+    watch(() => page.pageNum, async (val) => {
+      if (props.config?.serviceCurrentChangeLoad) {
+        return
+      }
+      const fn = props.config?.currentChange
+      const ret = await fn?.(val, props, page)
+      if (ret && isArray(ret)) {
+        modelValue.value = ret
+      }
+
+      // 以下是配置的点击事件服务所绑定的调用方法 ==== start ======
+      const serviceFn = props.config?.serviceCurrentChange
+      serviceFn?.(val, props, page)
+      // 以下是配置的点击事件服务所绑定的调用方法 ==== end ======
+    })
+    // 页面大小变动
+    watch(() => page.pageSize, async (val) => {
+      page.pageSize = val
+      const fn = props.config?.sizeChange
+      const ret = await fn?.(val, props, page)
+      if (ret && isArray(ret)) {
+        modelValue.value = ret
+      }
+
+      // 以下是配置的点击事件服务所绑定的调用方法 ==== start ======
+      const serviceFn = props.config?.serviceSizeChange
+      serviceFn?.(val, props, page)
+      // 以下是配置的点击事件服务所绑定的调用方法 ==== end ======
+    })
+
+    const tableExposeKeys = [
+      'clearSelection',
+      'getSelectionRows',
+      'toggleRowSelection',
+      'toggleAllSelection',
+      'toggleRowExpansion',
+      'setCurrentRow',
+      'clearSort',
+      'clearFilter',
+      'doLayout',
+      'sort',
+      'scrollTo',
+      'setScrollTop',
+      'setScrollLeft',
+      'columns'
+    ]
+    const tableRef = ref(null)
+    const tableExpose = tableExposeKeys.reduce((ret, key) => {
+      ret[key] = (...arg) => {
+        tableRef.value?.[key](...arg)
+      }
+      return ret
+    }, {})
+
+    function validate() {
+      return tableValidate({
+        props,
+        data: unref(modelValue),
+        lang: unref(lang),
+        rootValue,
+        dynamicMapComp,
+        messageInstance: messageInstance?.value,
+        isFrontPage: unref(isFrontPage),
+        page,
+      })
+    }
+
+    const context = reactive({
+      prop: props.config.dynamicHireRelat,
+      // ...toRefs(props),
+      // $el: formItemRef,
+      // size: _size,
+      // validateState,
+      // labelId,
+      // inputIds,
+      // isGroup,
+      // hasLabel,
+      // fieldValue,
+      // addInputId,
+      // removeInputId,
+      // resetField,
+      // clearValidate,
+      validate,
+    })
+    onMounted(() => {
+      formContext?.addField(context)
+    })
+
+    // 是否配置分页功能     ====== end======
+    expose({
+      multipleSelection,
+      selectedRow,
+      page,
+      changePage: (val, key) => {
+        page[key || 'pageNum'] = val
+      },
+      ...tableExpose
+    })
+    const dataList = computed(() => {
+      return totalRow.value?.length ? [...tableData.value, ...totalRow.value] : tableData.value
+    })
+
+    function cellMouseEnenter(e) {
+      const {overflow, content} = eleIsOverflow(e)
+      toopTip.show = false
+      toopTip.content = ''
+      toopTip.triggerRef = null
+      if (overflow) {
+        toopTip.show = true
+        toopTip.content = content
+        toopTip.triggerRef = e.target
+      }
+    }
+    function cellMouseout(e) {
+      toopTip.show = false
+      toopTip.content = ''
+      toopTip.triggerRef = null
+    }
+
+    function generateCellSolts(columnConfg, configIdx) {
+      let headerKey = 'header'
+      let cellKey = 'default'
+      if (isVirtualized.value) {
+        headerKey = 'headerCellRenderer'
+        cellKey = 'cellRenderer'
+      }
+      return {
+        [headerKey]: () => {
+          let retVnode = (
+            <span className='head-span' title={lang.value.indexOf('zh') > -1 ? columnConfg.metaNameZh : columnConfg.metaNameEn}>
+              { columnConfg.requiredFlag == '1' ? <span style="color: rgb(245, 34, 45); margin-right: 3px;">*</span> : '' }
+              { columnConfg.headerRender ? columnConfg.headerRender(h, { props, config: columnConfg, lang, rootValue, selects })
+                  : (lang.value.indexOf('zh') > -1 ? columnConfg.metaNameZh : columnConfg.metaNameEn)
+              }
+              {
+                columnConfg.hintFlag == '1' ? (
+                  <ElTooltip effect="dark" content={lang.value.indexOf('zh') > -1 ? columnConfg.hintContentZh : columnConfg.hintContentEn} placement="top">
+                    <elIcon style="fontSize: 16px; verticalAlign: sub; margin-left: 3px;"><QuestionFilled /></elIcon>
+                  </ElTooltip>
+                ) : null
+              }
+            </span>
+          )
+          if (isVirtualized.value) {
+            retVnode = (
+              <div className="table-v2-cell">
+                {retVnode}
+              </div>
+            )
+          }
+          return retVnode
+        },
+        [cellKey]: (params) => {
+          let row = params.row
+          let $index = params.$index
+          if (isVirtualized.value) {
+            row = params.rowData
+            $index = params.rowIndex
+          }
+          let retVnode = null
+          if (row.totalFlag) {
+            retVnode = totalCodeRenders.value[columnConfg.metaCode] ? totalCodeRenders.value[columnConfg.metaCode]({
+              val: row[columnConfg.metaCode],
+              row,
+              h
+            }) : null
+          } else {
+            // const config = columnConfg
+            const config = multiPmPageMetaList.value?.[$index]?.[configIdx]
+            retVnode = (
+              tableColumnNotRender(config) ? null :
+              <Renderer key={`${config.columnId}-${config.rowIndex}`} class="error-tip-block" rowScope={{row, $index}} modelValue={getValue($index)} onUpdate:modelValue={(val) => { onUpdateModelValue(val, $index) }} config={config}></Renderer>
+            )
+          }
+          if (isVirtualized.value) {
+            retVnode = (
+              <div className="table-v2-cell" onMouseenter={(e) => cellMouseEnenter(e)} onMouseleave={(e) => cellMouseout(e)}>
+                {retVnode}
+              </div>
+            )
+          }
+          return retVnode
+        }
+      }
+    }
+
+    function generateRenderVnode() {
+      if (isVirtualized.value) {
+        let autoResizerStyle = {
+          height: tableProps.height
+        } 
+        if (!dataList.value?.length) {
+          autoResizerStyle.height = 100
+        } else {
+          if (!autoResizerStyle.height) {
+            autoResizerStyle.height = Math.min((dataList.value?.length) * 40, 350)
+          }
+        }
+        autoResizerStyle.height = `${parseInt(autoResizerStyle.height)}px`
+        return (
+          <ElAutoResizer style={autoResizerStyle}>
+            {{
+              default: ({ height, width }) => {
+                const columns = tableColumnConfigs.value.map((columnConfg, configIdx) => {
+                  return columnConfg.displayType == DISPLAY_HIDDEN ? null : {
+                    key: columnConfg.requiredFlag + columnConfg.metaCode,
+                    ...getTableColumnProps(columnConfg, configIdx),
+                    ...generateCellSolts(columnConfg, configIdx),
+                  }
+                }).filter(item => !!item)
+                return (
+                  <ElTableV2
+                    {...tableProps.value} {...sliceTableEvents.value}
+                    class="table-border"
+                    cache={2}
+                    data={dataList.value}
+                    columns={columns}
+                    fixed
+                    width={width}
+                    height={height}
+                  >
+                    {{
+                      empty: () => (<div style={{height: '60px', color: 'var(--el-text-color-secondary)', textAlign: 'center', lineHeight: '60px'}}>
+                        {lang.value.indexOf('zh') > -1 ? '暂无数据' : 'No Data'}
+                      </div>)
+                    }}
+                  </ElTableV2>
+                )
+              }
+            }}
+          </ElAutoResizer>
+        )
+      }
+      return (
+        <ElTable {...tableProps.value} {...sliceTableEvents.value}
+          ref={(e) => {tableRef.value = e}}
+          highlight-current-row={selectable.value || tableProps.value?.highlightCurrentRow ? true : false}
+          onCurrentChange={selectable.value || tableProps.value?.highlightCurrentRow ? currentChange : () => {}}
+          data={dataList.value}
+          onSelectionChange={handleSelectionChange}
+          onSortChange={onSortChange}
+        >
+          {
+            tableColumnConfigs.value.map((columnConfg, configIdx) => {
+              return columnConfg.displayType == DISPLAY_HIDDEN ? null : (
+                <ElTableColumn key={columnConfg.requiredFlag + columnConfg.metaCode} {...getTableColumnProps(columnConfg, configIdx)}>
+                  {generateCellSolts(columnConfg, configIdx)}
+                </ElTableColumn>
+              )
+            })
+          }
+        </ElTable>
+      )
+    }
+
+    return () => {
+      return (
+        <div class="custom-component-table">
+          <ElTooltip
+            placement="top"
+            visible={toopTip.show && !!toopTip.triggerRef}
+            content={toopTip.content}
+            virtualTriggering
+            virtualRef={toopTip.triggerRef}
+          ></ElTooltip>
+          { generateRenderVnode() }
+          {
+            pageable.value ? 
+              <div class="pagination-wrap" style={{'justify-content': pageAlignEnmu[pageAlign.value || PAGE_RIGHT]}}>
+                <ElPagination style="margin-top: 16px;" { ...paginationProps.value } {...pagenationEvents} v-model:current-page={page.pageNum} v-model:page-size={page.pageSize} total={normalPageTotal.value}></ElPagination>
+              </div>
+              : null
+          }
+        </div>
+      )
+    }
+  }
+}