ProTable 业务通用表格

基于ElementPlus的表格组件，提供了业务通用的表格功能。

应用场景

该组件是对ElementPlus内置表格的扩展，基础用法完全相同。以下仅介绍ProTable特有的属性和用法。

扩展属性

beforeSwitchChange

beforeSwitchChange是一个可选的函数属性，用于在切换开关类型的列时进行自定义处理。它接收两个参数：当前行数据和列信息。当存在type为switch的列时，点击开关会触发该函数。如果函数返回false，则会阻止开关状态的切换。


beforeSwitchChange?: (row: Recordable<any>, column: TableColumnCtx<Recordable>) => Promise<boolean>;

表格列

ProTable提供了columns属性来定义表格列。

export interface ProTableColumnProps<
  T extends Recordable<any> = Recordable<any>,
> extends Partial<Omit<TableColumnCtx<T>, 'formatter' | 'type'>> {
  formatter?:
    | ColumnFormatter
    | ColumnFormatterPresets
    | Omit<TableColumnCtx<T>['formatter'], string>;
  slots?: {
    /** 自定义列的内容 */
    default?: string;
    /** 展开列的自定义内容 */
    expand?: string;
    /** 自定义 filter 图标 */
    filterIcon?: string;
    /** 自定义表头的内容 */
    header?: string;
  };
  /**
   * switch类型的列在点击开关时是否弹出确认弹窗
   */
  switchConfirm?: boolean;
  /**
   * 使用switch类型的列时，传入一个函数或对象来自定义开关组件的属性。
   */
  switchProps?:
    | ((scope: { column: ProTableColumnProps<T>; row: T }) => Recordable)
    | Recordable;
  /** 
   * 列的类型
   */
  type?: 'default' | 'expand' | 'index' | 'selection' | 'sort' | 'switch';
}

formatter

formatter属性可以是一个函数（同ElementPlus官方），也可以是一个预置的格式化器。当前提供了以下的预置格式化器：

日期和时间

date: 格式化为日期字符串，默认格式为yyyy-MM-dd
time: 格式化为时间字符串，默认格式为HH:mm:ss
datetime: 格式化为日期时间字符串，默认格式为yyyy-MM-dd HH:mm:ss

支持通过attrs传入格式化掩码或者内置的时间转换方法：

{
  formatter: 'date',  // 单元格将显示为默认的日期字符串，如"2023-10-01"
},
{
  formatter: {
    name: 'date',
    attrs: 'MM-dd'  // 单元格将被格式为MM-dd格式
  }
},
{
  formatter: {
    name: 'datetime',
    attrs: 'form-now'  // 单元格将显示为距离当前时间的时间差，例如“2天前”、“3小时后”等
  }
},
{
  formatter: {
    name: 'datetime',
    attrs: 'auto-date'  // 使用utils/time下的autoShowDate函数格式化日期
  }
},
{
  formatter: {
    name: 'datetime',
    attrs: 'auto-time'  // 使用utils/time下的autoShowTime函数格式化时间
  }
}

图片

img: 显示为图片缩略图。

{
  formatter: 'img',  // 单元格将显示为图片缩略图（使用默认的属性）
},
{
  formatter: {
    name: 'img',
    attrs: { // 设置图片的属性
      style: {
        width: '50px',  // 设置图片宽度
        height: '50px'  // 设置图片高度
      }
    }
  }
}

{
  formatter: 'tag',  // 单元格将显示为标签（使用默认的属性）
},
{
  formatter: {
    name: 'tag',
    attrs: { // 设置标签的属性
      type: 'success',  // 标签类型
      size: 'small'     // 标签大小
    }
  }
},
{
  formatter: {
    name: 'tag',
    attrs: [ // 提供一个数组。如果单元格的值能匹配到数组中的value，则显示对应的标签
      { value: 1, label: '已启用', type: 'success'}, //如果单元格的值为1，则显示“已启用”标签
      { value: 0, label: '已停用', type: 'warning' }, //如果单元格的值为2，则显示“已停用”标签
    ]
  }
}

金额

price: 显示为金额格式。

{
  formatter: 'price',  // 单元格将显示为金额格式（使用默认的属性）
},
{
  formatter: {
    name: 'price',
    attrs: { // 设置金额的属性
      prefix: '￥', // 金额前缀
      precision: 2      // 小数点精度
    }
  }
}

创建时间

createTime: 显示为创建时间。这是一个统一的时间显示样式，通常用于显示记录的创建和修改时间。默认会使用createTime和updateTime字段。

{
  formatter: 'createTime',  // 单元格将显示为创建时间和修改时间（使用默认的属性）
},
{
  formatter: {
    name: 'createTime',
    attrs: { // 如果创建时间和修改时间不是默认的字段名，可以通过attrs指定
      createTime: 'create_time', // 创建时间字段
      updateTime: 'update_time', // 修改时间字段
    }
  }
}

贡献者

Netfan

页面历史

最后编辑于 1 天前

查看完整历史

ProTable 业务通用表格 ​

扩展属性 ​

beforeSwitchChange ​

表格列 ​

formatter ​

日期和时间 ​

图片 ​

标签 ​

金额 ​

创建时间 ​

贡献者