PageContent 数据表格

配置化生成数据表格，支持列定义、分页、工具栏、操作列、自定义插槽、导入导出。

Props

参数	说明	类型	默认值
`content-config`	列表配置	`IContentConfig`	—

IContentConfig

属性	说明	类型	默认值
`indexAction`	列表查询接口（必填）	`(params) => Promise<PageResult>`	—
`cols`	列配置（必填）	`IColumn[]`	—
`pk`	主键字段名	`string`	`'id'`
`permPrefix`	权限前缀	`string`	—
`toolbar`	左侧工具栏按钮	`Array<ToolbarLeft \| IToolsButton>`	—
`defaultToolbar`	右侧工具栏图标	`Array<ToolbarRight \| IToolsButton>`	—
`table`	ElTable 属性	`Partial<TableProps>`	—
`pagination`	分页配置，`false` 关闭分页	`boolean \| Partial<PaginationProps>`	—
`pagePosition`	分页位置	`"left" \| "right"`	`"left"`
`request`	分页参数字段名	`{ pageName, limitName }`	—
`deleteAction`	删除接口	`(ids: string) => Promise<any>`	—
`exportAction`	后端导出接口	`(params) => Promise<any>`	—
`exportsAction`	前端导出接口	`(params) => Promise<TItem[]>`	—
`importAction`	后端导入接口	`(file: File) => Promise<any>`	—
`importsAction`	前端导入处理函数	`(data: IObject[]) => Promise<any>`	—
`importTemplate`	导入模板（URL 或获取函数）	`string \| (() => Promise<any>)`	—
`modifyAction`	行内编辑接口	`(data) => Promise<any>`	—

toolbar 可选值

"add" / "delete" / "import" / "export" / 自定义按钮对象

defaultToolbar 可选值

"refresh" / "filter" / "imports" / "exports" / "search" / 自定义按钮对象

列配置

属性	说明	类型	默认值
`prop`	数据字段名	`string`	—
`label`	列标题	`string`	—
`width`	列宽	`string \| number`	—
`align`	对齐方式	`"left" \| "center" \| "right"`	—
`type`	内置列类型	`"selection" \| "index" \| "expand"`	`"default"`
`templet`	列模板类型	`ITemplet`	—
`slotName`	自定义插槽名（`templet: "custom"` 时使用）	`string`	—
`operat`	操作列按钮（`templet: "tool"` 时使用）	`Array<ToolbarTable \| IToolsButton>`	—
`show`	是否显示该列	`boolean`	`true`
`columnKey`	列 key，用于筛选	`string`	—
`filters`	列筛选选项	`Array<{ text, value }>`	—
`filterMultiple`	筛选是否多选	`boolean`	—
`filterJoin`	筛选值拼接符	`string`	—
`initFn`	列初始化函数（用于异步加载筛选选项等）	`(item) => void`	—

templet 可选值

image / list / url / switch / input / price / percent / icon / date / tool / custom

配置示例

typescript

const contentConfig: IContentConfig<UserPageQuery> = reactive({
  permPrefix: "sys:user",
  pk: "id",

  table: {
    border: true,
    highlightCurrentRow: true,
  },

  pagination: {
    background: true,
    layout: "prev,pager,next,jumper,total,sizes",
    pageSize: 20,
    pageSizes: [10, 20, 30, 50],
  },

  indexAction: UserAPI.getPage,
  deleteAction: UserAPI.deleteByIds,
  exportAction: UserAPI.export,

  toolbar: ["add", "delete", "import", "export"],

  defaultToolbar: ["refresh", "filter", "search"],

  cols: [
    { type: "selection", width: 50, align: "center" },
    { label: "编号", prop: "id", width: 100, align: "center" },
    { label: "用户名", prop: "username", align: "center" },
    { label: "头像", prop: "avatar", templet: "image", align: "center" },
    {
      label: "性别",
      prop: "gender",
      templet: "custom",
      slotName: "gender",
      align: "center",
      width: 100,
    },
    {
      label: "操作",
      align: "center",
      fixed: "right",
      width: 220,
      templet: "tool",
      operat: ["edit", "delete"],
    },
  ],
});

自定义列插槽

vue

<page-content ref="contentRef" :content-config="contentConfig">
  <template #gender="scope">
    <DictTag v-model="scope.row[scope.prop]" code="gender" />
  </template>

  <template #status="scope">
    <el-tag :type="scope.row.status == 1 ? 'success' : 'info'">
      {{ scope.row.status == 1 ? "启用" : "禁用" }}
    </el-tag>
  </template>
</page-content>

Events

事件名	说明	回调参数
`add-click`	点击新增按钮	`()`
`export-click`	点击导出按钮	`()`
`toolbar-click`	点击工具栏自定义按钮	`(name: string)`
`operate-click`	点击操作列按钮	`(data: IOperateData)`
`filter-change`	列筛选变化	`(filters: any)`

实例方法

方法	说明
`fetchPageData(formData?, isRestart?)`	拉取列表数据，`isRestart=true` 重置到第一页
`exportPageData(formData?)`	导出数据
`getFilterParams()`	获取列筛选条件
`getSelectionData()`	获取勾选行数据
`handleRefresh(isRestart?)`	刷新列表

PageContent 数据表格 ​

Props ​

IContentConfig ​

列配置 ​

配置示例 ​

自定义列插槽 ​

Events ​

实例方法 ​