Просмотр исходного кода

[Feat 0000] 为表格添加默认填充文本功能

ruienger 5 месяцев назад
Родитель
Сommit
95ecaadbbc

+ 2 - 0
src/components/Table/src/const.ts

@@ -28,3 +28,5 @@ export const DEFAULT_SIZE = defaultSize;
 export const INDEX_COLUMN_FLAG = 'INDEX';
 
 export const ACTION_COLUMN_FLAG = 'ACTION';
+
+export const COLUMN_DEFAULT_TEXT = '-';

+ 13 - 4
src/components/Table/src/hooks/useColumns.ts

@@ -7,9 +7,9 @@ import { renderEditCell } from '../components/editable';
 import { usePermission } from '/@/hooks/web/usePermission';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { isArray, isBoolean, isFunction, isMap, isString } from '/@/utils/is';
-import { cloneDeep, isEqual } from 'lodash-es';
+import { cloneDeep, isEmpty, isEqual, isNil } from 'lodash-es';
 import { formatToDate } from '/@/utils/dateUtil';
-import { ACTION_COLUMN_FLAG, DEFAULT_ALIGN, INDEX_COLUMN_FLAG, PAGE_SIZE } from '../const';
+import { ACTION_COLUMN_FLAG, DEFAULT_ALIGN, INDEX_COLUMN_FLAG, PAGE_SIZE, COLUMN_DEFAULT_TEXT } from '../const';
 import { CUS_SEL_COLUMN_KEY } from './useCustomSelection';
 
 function handleItem(item: BasicColumn, ellipsis: boolean) {
@@ -104,6 +104,15 @@ function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: Bas
   }
 }
 
+function handleBodyCellRender(propsRef: ComputedRef<BasicTableProps>, columns: BasicColumn[]) {
+  const { defaultBodyCellText } = unref(propsRef);
+  columns.forEach((col) => {
+    if (!col.customRender && !isEmpty(defaultBodyCellText)) {
+      col.customRender = ({ value }) => (isNil(value) || isEmpty(value) ? defaultBodyCellText : value);
+    }
+  });
+}
+
 export function useColumns(
   propsRef: ComputedRef<BasicTableProps>,
   getPaginationRef: ComputedRef<boolean | PaginationProps>,
@@ -124,6 +133,7 @@ export function useColumns(
     handleActionColumn(propsRef, columns);
     // 代码逻辑说明: 【QQYUN-5571】自封装选择列,解决数据行选择卡顿问题
     handleCustomSelectColumn(columns);
+    handleBodyCellRender(propsRef, columns);
 
     if (!columns) {
       return [];
@@ -160,7 +170,7 @@ export function useColumns(
     const formatEditColumn = (columns) => {
       return columns.map((column) => {
         // 代码逻辑说明: 【issues-179】antd3 一些警告以及报错(针对表格)
-        if(column.slots?.customRender) {
+        if (column.slots?.customRender) {
           // slots的备份,兼容老的写法,转成新写法避免控制台警告
           column.slotsBak = column.slots;
           delete column.slots;
@@ -373,4 +383,3 @@ export function formatCell(text: string, format: CellFormat, record: Recordable,
     return text;
   }
 }
-

+ 2 - 2
src/components/Table/src/hooks/useDataSource.ts

@@ -264,8 +264,8 @@ export function useDataSource(
         const [key, val] = item;
         if (val === '') {
           delete params[key];
-        };
-      };
+        }
+      }
       const res = await api(params);
       rawDataSourceRef.value = res;
 

+ 5 - 1
src/components/Table/src/props.ts

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import type { PaginationProps } from './types/pagination';
 import type { BasicColumn, FetchSetting, TableSetting, SorterResult, TableCustomRecord, TableRowSelection, SizeType } from './types/table';
 import type { FormProps } from '/@/components/Form';
-import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING, DEFAULT_SIZE } from './const';
+import { DEFAULT_FILTER_FN, DEFAULT_SORT_FN, FETCH_SETTING, DEFAULT_SIZE, COLUMN_DEFAULT_TEXT } from './const';
 import { propTypes } from '/@/utils/propTypes';
 
 export const basicProps = {
@@ -145,4 +145,8 @@ export const basicProps = {
     type: Array,
     default: null,
   },
+  defaultBodyCellText: {
+    type: String,
+    default: COLUMN_DEFAULT_TEXT,
+  },
 };

+ 3 - 0
src/components/Table/src/types/table.ts

@@ -254,6 +254,9 @@ export interface BasicTableProps<T = any> {
    */
   defaultExpandAllRows?: boolean;
 
+  /** 当单元格没有文本时默认填充的文本 */
+  defaultBodyCellText?: string;
+
   /**
    * Initial expanded row keys
    * @type string[]