Table 表格组件

element-plusTable 组件进行封装,只需传入 columnsdata 参数,即可渲染出响应的表格出来。

Table 组件位于 src/components/Table

注意

推荐使用 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-plusTable 所有属性,详见

属性说明类型可选值默认值
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-plusTableColumn 属性。

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

Pagination

支持 element-plusPagination 所有属性,详见

Table 方法

方法名说明回调参数
setProps用于设置表格属性(props: Recordable) => void
setColumn用于修改表头结构(columnProps: TableSetPropsType[]) => void
addColumn新增表头结构(tableColumn: TableColumn, index?: number) => void
delColumn删除表头结构(field: string) => void