Table 表格组件

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

::: warning 注意推荐使用 tsx 来使用 Table 组件。 :::

用法

基础用法

<script setup lang="ts">
import { reactive } from 'vue'
import { Table, TableColumn } from '@/components/Table'

const columns = reactive<TableColumn[]>([
  {
    field: 'title',
    label: 'title'
  },
  {
    field: 'author',
    label: 'author'
  }
])

const data = reactive([
  {
    title: 'title1',
    author: 'author1'
  },
  {
    title: 'title2',
    author: 'author2'
  },
  {
    title: 'title3',
    author: 'author3'
  }
])
</script>

<template>
  <Table :columns="columns" :data="data" />
</template>

useTable

推荐配合 useTable 来使用

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

<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn, TableSlotDefault } from '@/components/Table'
import { getTreeTableListApi } from '@/api/table'
import { reactive, unref } from 'vue'
import { ElTag, ElButton } from 'element-plus'
import { useTable } from '@/hooks/web/useTable'

const { tableRegister, tableState } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const res = await getTreeTableListApi({
      pageIndex: unref(currentPage),
      pageSize: unref(pageSize)
    })
    return {
      list: res.data.list,
      total: res.data.total
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState

const { t } = useI18n()

const columns = reactive<TableColumn[]>([
  {
    field: 'selection',
    type: 'selection'
  },
  {
    field: 'index',
    label: t('tableDemo.index'),
    type: 'index'
  },
  {
    field: 'content',
    label: t('tableDemo.header'),
    children: [
      {
        field: 'title',
        label: t('tableDemo.title')
      },
      {
        field: 'author',
        label: t('tableDemo.author')
      },
      {
        field: 'display_time',
        label: t('tableDemo.displayTime')
      },
      {
        field: 'importance',
        label: t('tableDemo.importance'),
        formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
          return (
            <ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
              {cellValue === 1
                ? t('tableDemo.important')
                : cellValue === 2
                ? t('tableDemo.good')
                : t('tableDemo.commonly')}
            </ElTag>
          )
        }
      },
      {
        field: 'pageviews',
        label: t('tableDemo.pageviews')
      }
    ]
  },
  {
    field: 'action',
    label: t('tableDemo.action'),
    slots: {
      default: (data) => {
        return (
          <ElButton type="primary" onClick={() => actionFn(data)}>
            {t('tableDemo.action')}
          </ElButton>
        )
      }
    }
  }
])

const actionFn = (data: TableSlotDefault) => {
  console.log(data)
}
</script>

<template>
  <ContentWrap :title="`${t('router.treeTable')} ${t('tableDemo.example')}`">
    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="columns"
      :data="dataList"
      row-key="id"
      :loading="loading"
      sortable
      :pagination="{
        total: total
      }"
      @register="tableRegister"
    />
  </ContentWrap>
</template>

</script>

<template>
  <Table
    v-model:pageSize="tableObject.pageSize"
    v-model:currentPage="tableObject.currentPage"
    :data="tableObject.tableList"
    :loading="tableObject.loading"
    :pagination="{
      total: tableObject.total
    }"
    @register="register"
  />
</template>

参数介绍

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

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 中的 showOverflowTooltip	`boolean`	-	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	内容对齐方式	`string`	`left`/`center`/`right`	left
headerAlign	表头对齐方式	`string`	`left`/`center`/`right`	left
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

table.md 8.5 KB Permalink History Raw