resolver-egretimp-plus 0.1.106 → 0.1.108

package/dist/web/index.js.LICENSE.txt

@@ -1,10 +1,3 @@
-/*!
- * Quill Editor v1.3.7
- * https://quilljs.com/
- * Copyright (c) 2014, Jason Chen
- * Copyright (c) 2013, salesforce.com
- */
-
 /*!
  * The buffer module from node.js, for the browser.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resolver-egretimp-plus",
-  "version": "0.1.106",
+  "version": "0.1.108",
   "description": "交付体验渲染",
   "main": "./dist/web/index.js",
   "module": "./dist/web/index.js",

package/src/analysisComponent.jsx

@@ -221,6 +221,7 @@ export default {
         return defineAsyncComponent({
           loader: props.component,
           loadingComponent: LoadingComponent,
+          delay: 0
         })
       } else {
         return props.component

package/src/components/packages-H5/CustomComponentTableH5.vue

@@ -2,6 +2,10 @@
 import { commonPropsType, formatDate, formatAmount, getConfigOptions, hasOwn, isPlainObject } from '../../utils/index.js'
 import { computed, inject, onMounted, reactive, ref, useAttrs, watch } from 'vue'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const attrs = useAttrs()
 const lang = inject('lang')
 const selects = inject('selects')

package/src/components/packages-web/CustomComponentCollapse.vue

@@ -4,7 +4,7 @@
       <ElCollapseItem v-bind="collapseItemProps" :class="collapseItemClass">
         <template #title>
           <div class="collapge-slot-title">
-            <ElRow align="middle" :class="{'hidden-head-flag': hiddenHeadFlag}">
+            <ElRow align="middle" :class="polyElClass">
               <span>{{ lang.indexOf('zh') > -1 ? props.config.metaNameZh : props.config.metaNameEn }}</span>
               <Renderer @click="stopPropagation" :config="rightSlotPmPageMetaList" v-model="props.refValue.value"></Renderer>
             </ElRow>
@@ -25,6 +25,7 @@ import { ElCollapse, ElCollapseItem, ElCard, ElRow } from 'element-plus'
 import Renderer from '../../renderer.jsx'
 import { computed, inject, useAttrs, defineEmits, defineProps } from 'vue'
 import { commonPropsType, hasOwn } from '../../utils/index.js'
+import { reactive } from 'vue'
 
 defineOptions({
   inheritAttrs: false
@@ -79,6 +80,10 @@ const showSegment = computed(() => {
   return props?.showSegment == '1'
 })
 
+const polyElClass = reactive({
+  'hidden-head-flag': hiddenHeadFlag.value
+})
+
 const collapseClass = computed(() => {
   return {
     'underline-hidden': hasOwn(props.config, 'underlineHidden') ?  props.config.underlineHidden : noCollpase.value,
@@ -122,11 +127,14 @@ const stopPropagation = (e) => {
   e?.stopPropagation()
 }
 
+const needWrap = computed(() => {
+  return props.config.needWrap === true || props.config.needWrap == '1'
+})
 const component = computed(() => {
-  return (props.config.needWrap === true || props.config.needWrap == '1')  ? ElCard : 'div'
+  return needWrap.value ? ElCard : 'div'
 })
 const componentProps = computed(() => {
-  return (props.config.needWrap === true || props.config.needWrap == '1') ? {
+  return needWrap.value ? {
     shadow: 'never'
   } : {}
 })

package/src/components/packages-web/CustomComponentEditor.vue

@@ -1,8 +1,14 @@
 <script setup>
-import { computed, inject } from 'vue'
-import { Quill, quillEditor } from 'vue3-quill'
+import { computed, inject, ref } from 'vue'
+// import { Quill, quillEditor } from 'vue3-quill'
 import { commonPropsType } from '../../utils';
 
+const currentComp = ref(null)
+
+import('vue3-quill').then(({ Quill, quillEditor }) => {
+  currentComp.value = quillEditor
+})
+
 const props = defineProps({
   ...commonPropsType,
 })
@@ -24,7 +30,8 @@ const editorStyle = computed(() => {
 </script>
 <template>
   <div class="custom-component-editor">
-    <quillEditor
+    <component
+      :is="currentComp"
       ref="fieldEditor"
       v-model:value="modelValue"
       :options="editorOption"
@@ -33,7 +40,7 @@ const editorStyle = computed(() => {
       @focus="() => {}"
       @change="() => {}"
       :style="editorStyle"
-    ></quillEditor>
+    ></component>
   </div>
 </template>
 <style lang="scss">

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

@@ -1,5 +1,5 @@
   
-import { ElPagination } from 'element-plus'
+import { ElAutoResizer, ElPagination, ElTableV2 } from 'element-plus'
 import ElTable, { ElTableColumn } from '../table'
 import Renderer from '../../renderer.jsx'
 import { computed, inject, watch, h, ref, reactive } from 'vue'
@@ -11,10 +11,64 @@ export default {
   name: 'CustomComponentTable',
   props: {
     ...commonPropsType,
+    ...ElTableV2.props,
     ...ElTable.props,
     ...ElPagination.props
   },
   setup(props, { expose, attrs, emit }) {
+    // 虚拟表格列的属性
+    const virtualizedColumnPropKeys = ['align', 'class', 'key', 'dataKey', 'fixed', 'flexGrow', 'flexShrink', 'headerClass', 'hidden', 'style', 'sortable', 'title', 'maxWidth', 'minWidth', 'width']
+    // 开启虚拟化表格
+    const isVirtualized = computed(() => {
+      // if (props.config.metaCode === 'mksAttachList') {
+      //   return false
+      // }
+      // return true
+      return props.config?.isVirtualized == '1'
+    })
+    let pageSize = 5 // 默认每页5条
+    if (props.config?.pageSize) {
+      pageSize = parseInt(props.config.pageSize) || 5
+    }
+    const page = reactive({
+      pageNum: 1,
+      pageSize,
+      total: 0,
+    })
+    // 开启前端分页
+    const isFrontPage = computed(() => {
+      return props.config?.frontPageFlag == '1'
+    })
+    // 是否配置分页功能     ====== start======
+    const pageable = computed(() => {
+      return props.config?.pageable == '1'
+    })
+    // 分页器布局模式
+    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 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
@@ -24,7 +78,8 @@ export default {
       }
     })
     const tableProps = computed(() => {
-      const porpsObj =  Object.keys(ElTable.props).reduce((ret, key) => {
+      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]
         }
@@ -40,7 +95,7 @@ export default {
     })
 
     const getCompEvents = (comp) => {
-      let emitKeys = comp.emits
+      let emitKeys = comp.emits || {}
       if(!Array.isArray(emitKeys)) {
         emitKeys = Object.keys(emitKeys)
       }
@@ -54,7 +109,8 @@ export default {
     }
 
     const tableEvents = computed(() => {
-      return getCompEvents(ElTable)
+      const tableComp = isVirtualized.value ? ElTableV2 : ElTable
+      return getCompEvents(tableComp)
     })
     const sliceTableEvents = computed(() => {
       const ret = {
@@ -67,16 +123,6 @@ export default {
       return getCompEvents(ElPagination)
     })
 
-    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 tableColumnFirstMetaCode = ref("")
     const tableColumnConfigs = computed(() => {
       let pmPageMetaList = props.config.pmPageMetaList || []
@@ -91,18 +137,7 @@ export default {
         return normalColumnConfig(config)
       })
     })
-    let pageSize = 5
-    if (props.config?.pageSize) {
-      pageSize = parseInt(props.config.pageSize) || 5
-    }
-    const page = reactive({
-      pageNum: 1,
-      pageSize,
-      total: 0,
-    })
-    const isFrontPage = computed(() => {
-      return props.config?.frontPageFlag == '1'
-    })
+    
     const normalPageTotal = computed(() => {
       return !isFrontPage.value ? page.total : ((modelValue.value || [])?.length || 0)
     })
@@ -156,14 +191,15 @@ export default {
     /** 自定义排序逻辑 ===end==== */
 
     // 获取表格列的属性配置
-    const getTableColumnProps = (config, idx) => {
+    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)
-      const retObj =  Object.keys(ElTableColumn.props).reduce((ret, key) => {
+      const columnkeys = isVirtualized.value ? virtualizedColumnPropKeys : ElTableColumn.props
+      const retObj =  Object.keys(columnkeys).reduce((ret, key) => {
         if (hasOwn(config, key)) {
           ret[key] = config[key]
         }
@@ -181,22 +217,37 @@ export default {
       }
       if (config.columnWidth) {
         retObj.width = config.columnWidth
+        if (isVirtualized.value) {
+          retObj.width = parseInt(retObj.width)
+        }
       }
       if (!retObj.width) {
-        retObj.minWidth = '160px'
+        retObj.minWidth = 160
+        if (isVirtualized.value) {
+          retObj.width = 160
+          retObj.headerClass = 'flex-grow-import'
+          retObj.class = 'flex-grow-import'
+        }
+      }
+      let classKey = 'className'
+      if (isVirtualized.value) {
+        classKey = 'class'
       }
       if (retObj.width == 0 || retObj.width == '0px' || config.hidden == '1') {
-        retObj.className = 'hidden-column'
-        retObj.width = '1px'
+        retObj[classKey] = 'hidden-column'
+        retObj.width = 1
+        if (isVirtualized.value) {
+          retObj.headerClass = 'hidden-column'
+        }
       }
       if (nextConfig && (nextConfig.width == 0 || nextConfig.width == '0px' || nextConfig.hidden == '1')) {
-        retObj.className = `${retObj.className || ''} next-hidden-column`
+        retObj[classKey] = `${retObj[classKey] || ''} next-hidden-column`
       }
       if (isEndConfig) {
-        retObj.className = `${retObj.className || ''} end-show-column`
+        retObj[classKey] = `${retObj[classKey] || ''} end-show-column`
       }
       if (config.metaType == 'CustomComponentSelectEmployees') {
-        retObj.className = `${retObj.className || ''} clear-index`
+        retObj[classKey] = `${retObj[classKey] || ''} clear-index`
       }
       if (
         isPlainColumn({...config, isColumn: true}, true) &&
@@ -235,11 +286,12 @@ export default {
           return orginRet && parentSelectionsRet
         }
       }
+
       return retObj
     }
 
     // 获取表格的配置，这边会做一下配置转化，表格中的不需要labelWidth
-    const normalColumnConfig = (config) => {
+    function normalColumnConfig(config) {
       return {
         ...config,
         labelHidden: '1'
@@ -247,7 +299,7 @@ export default {
     }
 
     // 列中是否需要展示render渲染
-    const tableColumnNotRender = (config) => {
+    function tableColumnNotRender(config) {
       if (!config) return true
       // if (config['show-overflow-tooltip'] || config.showOverflowTooltip) return true
       // 'selection', 'index' 是el-table属性type中type的两个枚举，这两个直接使用默认效果
@@ -257,12 +309,11 @@ export default {
       const metaTypeNotRender = TABLE_COLUMN_NOT_RENDER_META_TYPE.some(metaType => compareComponet(metaType, config.metaType)) || !config.metaType
       return !config.renderby && metaTypeNotRender
     }
-    
 
-    const getValue = (idx) => {
+    function getValue(idx) {
       return tableData.value?.[idx]
     }
-    const onUpdateModelValue = (val, idx) => {
+    function onUpdateModelValue(val, idx) {
       if (!modelValue.value) {
         modelValue.value = []
       }
@@ -350,7 +401,7 @@ export default {
         return ret
       }, defaultTotalObj)
     })
-    const defaultTotalFn = (total, val, row) => {
+    function defaultTotalFn(total, val, row) {
       if (val === undefined || val === null) {
         val = 0
         if (val === undefined) {
@@ -386,10 +437,7 @@ export default {
     })
     // 统计行定义 ====end======
 
-    // 表格是否开启啦可选择配置
-    const selectable = computed(() => {
-      return props.config?.selectable == '1' || props.config?.canSelect
-    })
+    // 开启单行选择配置后需要的逻辑=====start=====
     const selectedRow = ref(null)
     const currentChange = (row) => {
       selectedRow.value = row
@@ -401,22 +449,8 @@ export default {
       multipleSelection.value = val
       rootStore.tableSelectedInfo = val
     }
+    // 开启单行选择配置后需要的逻辑=====end=====
 
-    // 是否配置分页功能     ====== start======
-    const pageable = computed(() => {
-      return props.config?.pageable == '1'
-    })
-    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 paginationProps = computed(() => {
       const attrs =  Object.keys(ElPagination.props).reduce((ret, key) => {
@@ -505,57 +539,120 @@ export default {
       return totalRow.value?.length ? [...tableData.value, ...totalRow.value] : tableData.value
     })
     // console.log('dynamicMapComp===:', inject('dynamicMapComp'))
-    return () => {
-      return (
-        <div class="custom-component-table">
-          <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}
-          >
+
+    function generateCellSolts(columnConfg, configIdx) {
+      let headerKey = 'header'
+      let cellKey = 'default'
+      if (isVirtualized.value) {
+        headerKey = 'headerCellRenderer'
+        cellKey = 'cellRenderer'
+      }
+      return {
+        [headerKey]: () => (
+          <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)
+            }
             {
-              tableColumnConfigs.value.map((columnConfg, configIdx) => {
-                return columnConfg.displayType == DISPLAY_HIDDEN ? null : (
-                  <ElTableColumn key={columnConfg.requiredFlag + columnConfg.metaCode} {...getTableColumnProps(columnConfg, configIdx)}>
+              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>
+        ),
+        [cellKey]: (params) => {
+          let row = params.row
+          let $index = params.$index
+          if (isVirtualized.value) {
+            row = params.rowData
+            $index = params.rowIndex
+          }
+          if (row.totalFlag) {
+            return totalCodeRenders.value[columnConfg.metaCode] ? totalCodeRenders.value[columnConfg.metaCode]({
+              val: row[columnConfg.metaCode],
+              row,
+              h
+            }) : null
+          }
+          // const config = columnConfg
+          const config = multiPmPageMetaList.value?.[$index]?.[configIdx]
+          return (
+            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>
+          )
+        }
+      }
+    }
+
+    function generateRenderVnode() {
+      if (isVirtualized.value) {
+        let height = '500px'
+        if (!dataList.value?.length) {
+          height = '100px'
+        }
+        return (
+          <ElAutoResizer style={{height}}>
+            {{
+              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}
+                  >
                     {{
-                      header: () => (
-                        <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>
-                      ),
-                      default: ({row, column, $index}) => {
-                        if (row.totalFlag) {
-                          return totalCodeRenders.value[columnConfg.metaCode] ? totalCodeRenders.value[columnConfg.metaCode]({
-                            val: row[columnConfg.metaCode],
-                            row,
-                            h
-                          }) : null
-                        }
-                        const config = multiPmPageMetaList.value?.[$index]?.[configIdx]
-                        return (
-                          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>
-                        )
-                      }
+                      empty: () => (<div style={{height: '60px', color: 'var(--el-text-color-secondary)', textAlign: 'center', lineHeight: '60px'}}>
+                        {lang.value.indexOf('zh') > -1 ? '暂无数据' : 'No Data'}
+                      </div>)
                     }}
-                  </ElTableColumn>
+                  </ElTableV2>
                 )
-              })
-            }
-          </ElTable>
+              }
+            }}
+          </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">
+          { generateRenderVnode() }
           {
             pageable.value ? 
               <div class="pagination-wrap" style={{'justify-content': pageAlignEnmu[pageAlign.value || PAGE_RIGHT]}}>

package/src/components/patchComponents-web.js

@@ -15,7 +15,7 @@ export default function () {
         }
       }
     } catch (error) {
-      modulesFiles = import.meta.glob('./packages-web/*.{vue,jsx,js}')
+      modulesFiles = import.meta.glob('./packages-web/*.{vue,jsx,js}', { eager: true })
       modulesFilesKeys = Object.keys(modulesFiles)
       resolveModule = (modulePath) => {
         return modulesFiles[modulePath]

package/src/components/tabs/src/tab-bar.vue

@@ -43,7 +43,7 @@ const getBarStyle = () => {
 
   props.tabs.every((tab) => {
     const $el = instance.parent?.refs?.[`tab-${tab.uid}`]
-    if (!$el) return false
+    if (!tab && !$el) return false
 
     if (!tab.active) {
       return true

package/src/resolver-common.vue

@@ -46,8 +46,8 @@ const loadSelects = ref({})
 const attrs = useAttrs()
 const allSelects = computed(() => {
   return {
-    ...(props.selects || {}),
-    ...loadSelects.value
+    ...loadSelects.value,
+    ...(props.selects || {})
   }
 })
 initInterceptors(props.messageInstance)

package/src/theme/element/components/common.scss

@@ -1,6 +1,7 @@
 @mixin nestMargin {
   & > div {
     & > .CustomComponentCollapse,
+    & > .CustomComponentCard,
     & > .CustomComponentTabs {
       & > div {
         margin-right: 16px;

package/src/theme/element/components/table.scss

@@ -1,3 +1,16 @@
+@mixin hiddenColumn {
+  .hidden-column {
+    border: none;
+    overflow: hidden;
+    // display: none;
+  }
+  .hidden-column + .el-table__cell {
+    // border: none;
+  }
+  .next-hidden-column.end-show-column {
+    border: none;
+  }
+}
 
 .el-table__header-wrapper tr td.el-table-fixed-column--left.is-first-column::before, .el-table__header-wrapper tr td.el-table-fixed-column--right.is-first-column::before, .el-table__header-wrapper tr th.el-table-fixed-column--left.is-first-column::before, .el-table__header-wrapper tr th.el-table-fixed-column--right.is-first-column::before, .el-table__body-wrapper tr td.el-table-fixed-column--left.is-first-column::before, .el-table__body-wrapper tr td.el-table-fixed-column--right.is-first-column::before, .el-table__body-wrapper tr th.el-table-fixed-column--left.is-first-column::before, .el-table__body-wrapper tr th.el-table-fixed-column--right.is-first-column::before, .el-table__footer-wrapper tr td.el-table-fixed-column--left.is-first-column::before, .el-table__footer-wrapper tr td.el-table-fixed-column--right.is-first-column::before, .el-table__footer-wrapper tr th.el-table-fixed-column--left.is-first-column::before, .el-table__footer-wrapper tr th.el-table-fixed-column--right.is-first-column::before{
   height: 100%;
@@ -90,7 +103,7 @@
   td.el-table__cell {
     color: var(--el-input-text-color,var(--el-text-color-regular));
   }
-  .el-table__cell {
+  .el-table__cell,.el-table-v2__row-cell {
     height: 40px;
     .el-date-editor, .el-date-editor--date{
       .el-input__wrapper{
@@ -141,18 +154,26 @@
   .pagination-wrap {
     display: flex;
   }
-  .hidden-column {
-    border: none;
+  // table-v2
+  .table-border {
+    border: 1px solid var(--el-table-border-color);
+    border-radius: var(--boder-radius);
     overflow: hidden;
-    // display: none;
+    
   }
-  .hidden-column + .el-table__cell {
-    // border: none;
+  .el-table-v2__header-cell,.el-table-v2__row-cell {
+    border-right: var(--el-table-border);
+    &:last-of-type {
+      border-right: none;
+    }
   }
-  .next-hidden-column.end-show-column {
-    border: none;
+  .flex-grow-import {
+    flex-grow: 1 !important;
   }
+
+  @include hiddenColumn;
+  
   .clear-index {
     z-index: unset;
   }
-}
+}