tsx-element-table

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';
  

TsxElementTable API

TsxElementTable 属性

HandleProps

HandleRightColumnProps

HandleColumnProps

TableProps

PaginationProps

TsxElementTable 插槽

TsxElementTable 方法

TsxElementTable 暴露

TsxElementTable 类型

后续开发任务

• Table Column 颗粒度与 Element 对其（属性、方法、暴露）。
• Pagination 增加可配置一定条件下显示与隐藏。
• Handle 右侧可在一定限度内配置新的按钮。
• 组件拆分解耦。

反馈与提问

本组件长期更新，直至组件完善。如有问题、BUG 反馈、更新意见可直接提交 Issues。