Browse Source

JVxeTable表格Column配置formatter属性不生效 #6950]

JEECG 8 months ago
parent
commit
34442b7226

+ 4 - 4
jeecgboot-vue3/src/components/jeecg/JVxeTable/src/components/cells/JVxeNormalCell.vue

@@ -1,13 +1,12 @@
 <template>
-  <JVxeReloadEffect :vNode="innerValue" :effect="isEffect" @effectEnd="handleEffectEnd" />
+  <JVxeReloadEffect :vNode="innerLabel" :effect="isEffect" @effectEnd="handleEffectEnd" />
 </template>
 
 <script lang="ts">
-  import { ref, defineComponent } from 'vue';
+  import { ref, watch, defineComponent } from 'vue';
   import JVxeReloadEffect from '../JVxeReloadEffect';
   import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
   import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
-  import { watch } from 'vue';
 
   export default defineComponent({
     name: 'JVxeNormalCell',
@@ -15,7 +14,7 @@
     props: useJVxeCompProps(),
     setup(props: JVxeComponent.Props) {
       const setup = useJVxeComponent(props);
-      const { innerValue, row } = setup;
+      const { innerValue, innerLabel, row } = setup;
 
       const reloadEffect = props.renderOptions.reloadEffect;
       const isEffect = ref<boolean>(false);
@@ -39,6 +38,7 @@
       }
 
       return {
+        innerLabel,
         innerValue,
         isEffect,
         handleEffectEnd,

+ 12 - 0
jeecgboot-vue3/src/components/jeecg/JVxeTable/src/hooks/useJVxeComponent.ts

@@ -44,6 +44,17 @@ export function useJVxeComponent(props: JVxeComponent.Props) {
   const fullDataLength = computed(() => props.params.$table.internalData.tableFullData.length);
   // 是否正在滚动中
   const scrolling = computed(() => !!props.renderOptions.scrolling);
+  // 当有formatter时,优先使用formatter
+  const innerLabel = computed(() => {
+    if(typeof column.value?.formatter === 'function'){
+      return column.value.formatter({
+        cellValue: innerValue.value,
+        row: row.value,
+        column: column.value,
+      });
+    }
+    return innerValue.value
+  });
   const cellProps = computed(() => {
     let renderOptions = props.renderOptions;
     let col = originColumn.value;
@@ -111,6 +122,7 @@ export function useJVxeComponent(props: JVxeComponent.Props) {
     return listeners;
   });
   const context = {
+    innerLabel,
     innerValue,
     row,
     rows,