Common Components
On this page

使用 NEasyTable ​

NEasyTable ​

NEasyTable 组件需要与 useAntDesignVueTableHelper hook 配合使用, 可以简化 NTable 组件的使用并提供统一的表格行为逻辑.

useAntDesignVueTableHelper(loadRecord, columns, KeyName, options) ​

  • 类型:

    typescript
    function useAntDesignVueTableHelper(
  loadRecord: LoadTableRecordFunction,
  columns: NTableColumn[],
  recordKeyName: string,
  options?: { pageSize?: number; pageStartIndex?: number; showPagination?: boolean }
): {
  tableHelper: TableHelper;
  columns: Ref<NTableColumn[]>;
  onChange: (
    pagination: { current: number; pageSize: number },
    filters: Record<string, any>,
    sorter: Array<{ direction: "ascend" | "descend"; field: string }>
  ) => void;
  rowSelection: TableRowSelection;
  searchForm: TableSearchForm;
};
    查看子类型定义
    typescript
    type LoadTableRecordFunction = (
  pagination: { current: number; pageSize: number },
  filter: Record<string, any>,
  sorter: Array<{ direction: "ascend" | "descend"; field: string }>
) => Promise<{ data: any[]; total: number }>;

type NTableColumn = {
  title: string;
  dataIndex: string;
  sorter: boolean;
  ellipsis: boolean;
  width: number | string;
  fixed: "left" | "right";
  visible: boolean;
};

type TableRowSelection = {
  selectedRowKeys: string[];
  selectedRows: any[];
  reset: () => void;
};

type TableSearchForm = {
  search: () => void;
  reset: () => void;
  data: Record<string, any>;
};

    为了便于阅读, 对类型进行了简化

  • 参数说明:

    1. loadRecord: 用于加载数据, 该函数接收三个参数如下.

      • pagination: 分页参数, 有 current 和 pageSize 两个参数.
      • filter: 筛选参数, 一般会跟搜索表单的数据绑定, 是一个以表单项的 name 为 key, 值为 value 构成的对象.
      • sorter: 排序参数, 是由多个 direction 和 field 两个参数组成的对象构成的数组. 目前只支持单个排序参数, 即 sorter 数组中最多只会有一个数组项.
      • 返回值: 该函数需要返回一个类型为 Promise<{ data: [], total: number }> 的对象. 其中 data 为表格数据, total 为表格数据总数.

    2. columns 用于生成表格列, 表格列参数与 antdv 的 table 组件的 Column 参数一致. 但新增了以下参数.

      • visible: 用于控制列的显示和隐藏, 默认为 true.

    3. rowKey 用于指定表格行数据的 key.

    4. options

      • pageSize: 指定每页显示的条数, 默认为 10.
      • pageStartIndex: 指定页码的起始值, 默认为 1.
      • showPagination: 是否显示分页器, 默认为 true.

  • 返回值说明:

    • tableHelper: 传入 NEasyTable 中. 也可以直接使用, 见 使用 TableHelper 章节
    • columns: 直接用于 antdv 的 table 组件. 同时也可用于 NToolbar 组件的 tableColumns 属性用于筛选列功能.
    • onChange: 直接用于 antdv 的 table 组件的 onChange 属性.
    • rowSelection: 直接用于 antdv 的 table 组件. 提供跨页保留选择行的能力和 reset 用于重置已选择的行.
    • searchForm: 用于导出搜索表单数据对象, 并提供 search, reset 用于触发请求和重置表单.

  • 示例:

    javascript
    import { ref } from "vue";
import { useAntDesignVueTableHelper } from "@nbicc/common-components";
import { requestPosts } from "../mock";

// 初始化 table helper
const { tableHelper, columns, onChange, rowSelection, searchForm } = useAntDesignVueTableHelper(
  requestDataSource,
  [
    {
      title: "Id",
      dataIndex: "id",
      fixed: "left",
      ellipsis: true
    },
    {
      title: "Name",
      dataIndex: "name",
      sorter: true,
      ellipsis: true
    },
    {
      title: "Description",
      dataIndex: "description",
      ellipsis: true
    },
    {
      title: "Operator",
      dataIndex: "operator",
      ellipsis: true
    }
  ],
  "id"
);

// 加载数据
searchForm.search();

// 模拟请求
// eslint-disable-next-line @typescript-eslint/no-unused-vars
async function requestDataSource(pagination, filter, sorter) {
  const { current, pageSize } = pagination;
  const { data, total } = await requestPosts(current, pageSize, 1000);
  return { data, total };

  // 测试空数据
  // return { data: [], total: 0 };
}

const expanded = ref(false);
const visible = ref(true);
    html
    <template>
  <a-form
    :model="searchForm.data"
    layout="inline"
    style="margin-bottom: 16px; transition: height 400ms"
    :style="{ height: expanded ? '256px' : '64px' }"
  >
    <a-form-item name="name" label="名称">
      <a-input v-model:value="searchForm.data.name" placeholder="请输入" />
    </a-form-item>
    <a-form-item name="description" label="描述">
      <a-input v-model:value="searchForm.data.description" placeholder="请输入" />
    </a-form-item>
    <a-form-item style="margin-right: 0">
      <a-space>
        <a-button @click="searchForm.reset">重置</a-button>
        <a-button type="primary" @click="searchForm.search">查询</a-button>
        <a-switch v-model:checked="expanded" checked-children="折叠" un-checked-children="展开" />
        <a-switch v-model:checked="visible" checked-children="显示" un-checked-children="隐藏" />
      </a-space>
    </a-form-item>
  </a-form>
  <NEasyTable
    v-show="visible"
    :table-helper="tableHelper"
    :columns="columns"
    @change="onChange"
    :row-selection="rowSelection"
    :scroll="{ x: 1200 }"
  />
</template>