Tsx-Element-Table

基于 Vue3 和 Element ui 二次封装的Table组件。

展示

安装与引入

// npm
npm install tsx-element-table
// pnpm
pnpm install tsx-element-table

// 按需引入组件
import TsxElementTable from 'tsx-element-table';

// 样式
import 'tsx-element-table/dist/index.css';

// 类型引入 - 举例
import { type ComponentProps } from 'tsx-element-table';

组件介绍与使用

组件分为三个部分：Handle，Table，Pagination组成。除了Table都可以置空。

export interface ComponentProps {
  // Normal
  size?: ComponentSize;
  // Handle
  handle?: HandleProps;
  // TableColumns（1.6.0更新）
  tableColumns: TableColumnProps[];
  // Table
  table: TableProps;
  // Pagination
  pagination?: PaginationProps;
  pageSize?: number;
  currentPage?: number;
}

Handle

Handle 组件可自定义左侧按钮，通过配置 JSON 实现，也可以通过Slot自定义显示。

// HandleProps
export interface HandleProps {
  columns?: HandleColumnProps[];
  show?: boolean;
}
// JSON for Typescript
export interface HandleColumnProps {
  key: string; // 唯一标识，用作点击事件的判断
  label: string; // 按钮文本
  type?: ButtonType; // 按钮类型 Enum，参考Element 按钮类型
  show?: boolean; // 按钮是否显示，可以用作按钮权限判断
  action?: () => void; // 点击后的回调，也可以使用点击事件处理
}

Slot 插槽

<template #handle-left> ... </template>

@handle-click 为左侧菜单栏的点击事件回调，只有一个参数 key。根据参数 key 作相应的业务处理。 @table-refresh 为右侧操作按钮，刷新表格数据。 @size-change 为右侧调整组件大小按钮，可以将大小设置为持久化数据，并通过组件 size 属性作为默认组件大小。

Table

Table 组件通过 JSON 配置表格列，参数参考 Element Table Column。也可通过 slot 自定义列。 slot 为具名插槽，其名称为 table-${列prop} ，如下实例所示。

// Slot
<template #table-name="{ row }">
  {{ row.name }}
</template>

原生 Element Table 组件中的回调函数都统一进行转发。

<tsxElementTable ... @row-click="..." @selection-change="..." />

原生 Element Table 组件中暴露出的方法也都进行统一转发。

const tsxElementTableRef = ref<ComponentInstance>();
onMounted(() => {
  const current = unref(tsxElementTableRef);
  const tableExpose = current && current.getTableRef();
});

组件还有一个字段管理功能，用户可选择展示哪些字段，隐藏哪些字段。

Pagination

Pagination 组件做了修改，通过 v-model:pageSize 和 v-model:currentPage 实现组件之间的双向绑定。 show 可传布尔值：true 一直展示，false一直不展示。还可传auto字符串：数据大于 1 页时展示，否则不展示。

// PaginationProps
export interface PaginationProps {
  total?: number;
  show?: PaginationShow;
}
// PaginationShow
type PaginationShow = boolean | 'auto';