import{o as n,c as a,a as s}from"./app.51e46c58.js";const t='{"title":"Table 表格组件","description":"","frontmatter":{},"headers":[{"level":2,"title":"用法","slug":"用法"},{"level":3,"title":"基础用法","slug":"基础用法"},{"level":3,"title":"useTable","slug":"usetable"},{"level":2,"title":"Table 属性","slug":"table-属性"},{"level":3,"title":"Columns","slug":"columns"},{"level":3,"title":"Pagination","slug":"pagination"},{"level":2,"title":"Table 方法","slug":"table-方法"}],"relativePath":"components/table.md","lastUpdated":1721205967753}',p={},o=s('

Table 表格组件

对 element-plus 的 Table 组件进行封装，只需传入 columns 与 data 参数，即可渲染出响应的表格出来。

Table 组件位于 src/components/Table 内

注意

推荐使用 tsx 来使用 Table 组件。

用法

基础用法

<script setup lang="ts">\nimport { reactive } from 'vue'\nimport { Table, TableColumn } from '@/components/Table'\n\nconst columns = reactive<TableColumn[]>([\n  {\n    field: 'title',\n    label: 'title'\n  },\n  {\n    field: 'author',\n    label: 'author'\n  }\n])\n\nconst data = reactive([\n  {\n    title: 'title1',\n    author: 'author1'\n  },\n  {\n    title: 'title2',\n    author: 'author2'\n  },\n  {\n    title: 'title3',\n    author: 'author3'\n  }\n])\n</script>\n\n<template>\n  <Table :columns="columns" :data="data" />\n</template>\n\n

useTable

推荐配合 useTable 来使用

复杂点的例子，请在线预览

<script setup lang="tsx">\nimport { ContentWrap } from '@/components/ContentWrap'\nimport { useI18n } from '@/hooks/web/useI18n'\nimport { Table, TableColumn, TableSlotDefault } from '@/components/Table'\nimport { getTreeTableListApi } from '@/api/table'\nimport { reactive, unref } from 'vue'\nimport { ElTag, ElButton } from 'element-plus'\nimport { useTable } from '@/hooks/web/useTable'\n\nconst { tableRegister, tableState } = useTable({\n  fetchDataApi: async () => {\n    const { currentPage, pageSize } = tableState\n    const res = await getTreeTableListApi({\n      pageIndex: unref(currentPage),\n      pageSize: unref(pageSize)\n    })\n    return {\n      list: res.data.list,\n      total: res.data.total\n    }\n  }\n})\nconst { loading, dataList, total, currentPage, pageSize } = tableState\n\nconst { t } = useI18n()\n\nconst columns = reactive<TableColumn[]>([\n  {\n    field: 'selection',\n    type: 'selection'\n  },\n  {\n    field: 'index',\n    label: t('tableDemo.index'),\n    type: 'index'\n  },\n  {\n    field: 'content',\n    label: t('tableDemo.header'),\n    children: [\n      {\n        field: 'title',\n        label: t('tableDemo.title')\n      },\n      {\n        field: 'author',\n        label: t('tableDemo.author')\n      },\n      {\n        field: 'display_time',\n        label: t('tableDemo.displayTime')\n      },\n      {\n        field: 'importance',\n        label: t('tableDemo.importance'),\n        formatter: (_: Recordable, __: TableColumn, cellValue: number) => {\n          return (\n            <ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>\n              {cellValue === 1\n                ? t('tableDemo.important')\n                : cellValue === 2\n                ? t('tableDemo.good')\n                : t('tableDemo.commonly')}\n            </ElTag>\n          )\n        }\n      },\n      {\n        field: 'pageviews',\n        label: t('tableDemo.pageviews')\n      }\n    ]\n  },\n  {\n    field: 'action',\n    label: t('tableDemo.action'),\n    slots: {\n      default: (data) => {\n        return (\n          <ElButton type="primary" onClick={() => actionFn(data)}>\n            {t('tableDemo.action')}\n          </ElButton>\n        )\n      }\n    }\n  }\n])\n\nconst actionFn = (data: TableSlotDefault) => {\n  console.log(data)\n}\n</script>\n\n<template>\n  <ContentWrap :title="`${t('router.treeTable')} ${t('tableDemo.example')}`">\n    <Table\n      v-model:pageSize="pageSize"\n      v-model:currentPage="currentPage"\n      :columns="columns"\n      :data="dataList"\n      row-key="id"\n      :loading="loading"\n      sortable\n      :pagination="{\n        total: total\n      }"\n      @register="tableRegister"\n    />\n  </ContentWrap>\n</template>\n\n</script>\n\n<template>\n  <Table\n    v-model:pageSize="tableObject.pageSize"\n    v-model:currentPage="tableObject.currentPage"\n    :data="tableObject.tableList"\n    :loading="tableObject.loading"\n    :pagination="{\n      total: tableObject.total\n    }"\n    @register="register"\n  />\n</template>\n\n

参数介绍

const { tableRegister, tableState, tableMethods } = useTable(props: UseTableConfig)\n

props

在使用 useTable 的时候，需要传入 fetchDataApi，为了保证可定制，需要自行在 fetchDataApi 中完成请求逻辑，之后返回结果 { list: Array, total?: number }，后续分页，就可以自动请求数据。

如果需要删除，同样需要传入 fetchDelApi ，返回一个 Boolean 来判断是否删除完成，后续 useTable 将自行刷新表格。

tableRegister

tableRegister 用于注册 useTable，如果需要使用 useTable 提供的 api，必须将 tableRegister 传入组件的 onRegister

tableState

表格状态

属性说明类型可选值默认值
pageSize每页显示多少条number-10
currentPage当前页number-1
total总条数number--
dataList表格数据any[]-[]
loading表格是否加载中boolean-false

tableMethods

方法名说明回调参数
setProps用于表格组件属性(props: Recordable) => void
getList获取表格数据() => Promise<void>
setColumn设置表头结构(columnProps: TableSetProps[]) => void
addColumn新增表头结构(tableColumn: TableColumn, index?: number) => void
delColumn删除表头结构(field: string) => void
getElTableExpose获取 ElTable 实例() => Promise<typeof ElTable>
refresh刷新表格() => void
delList删除数据(idsLength: number) => Promise<void>

Table 属性

除以下参数外，还支持 element-plus 的 Table 所有属性，详见

属性说明类型可选值默认值
pageSize每页显示多少条，支持 v-model 双向绑定number-10
currentPage当前页，支持 v-model 双向绑定number-1
selection是否多选boolean-true
showOverflowTooltip是否所有的超出隐藏，优先级低于 schema 中的 showOverflowTooltipboolean-true
columns表头结构，详见TableColumn[]-[]
expand是否显示展开行boolean-false
pagination是否展示分页，详见Pagination/undefined--
reserveSelection仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）boolean-false
loading加载状态boolean-false
reserveIndex是否叠加索引boolean-false
align内容对齐方式stringleft/center/rightleft
headerAlign表头对齐方式stringleft/center/rightleft
data表格数据Recordable[]-[]
showAction是否显示表格操作boolean-false
imagePreview需要展示图片的字段string[]--
videoPreview需要展示视频的字段string[]--
customContent是否自定义内容boolean-false
cardBodyStyle卡片内容样式CSSProperties--
cardBodyClass卡片内容类名string--
cardWrapStyle卡片容器样式CSSProperties--
cardWrapClass卡片容器类名string--

Columns

除了以下属性，还支持 element-plus 的 TableColumn 属性。

属性说明类型可选值默认值
field唯一值，如需展示正确的数据，需要与 data 中的属性名对应string--
label表头名称string--
hidden是否隐藏boolean--
slots插槽对象object--
children子项，用于多级表头TableColumn[]--

Pagination

支持 element-plus 的 Pagination 所有属性，详见

Table 方法

方法名说明回调参数
setProps用于设置表格属性(props: Recordable) => void
setColumn用于修改表头结构(columnProps: TableSetPropsType[]) => void
addColumn新增表头结构(tableColumn: TableColumn, index?: number) => void
delColumn删除表头结构(field: string) => void
',33);p.render=function(s,t,p,e,c,l){return n(),a("div",null,[o])};export default p;export{t as __pageData};