Table 表格组件

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

Table 组件位于 src/components/Table

用法

<script setup lang="ts">
import { reactive } from 'vue'

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

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

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

refTable

如果只使用 refTable,所有参数都需要手动传入到 Table 组件中,推荐配合 useTable 使用。

useTable

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

<script setup lang="ts">
import { Table } from '@/components/Table'
import { getTableListApi } from '@/api/table'
import { TableData } from '@/api/table/types'
import { reactive } from 'vue'
import { useTable } from '@/hooks/web/useTable'

const columns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: 'index',
    type: 'index'
  },
  {
    field: 'title',
    label: 'title'
  },
  {
    field: 'author',
    label: 'author'
  },
  {
    field: 'display_time',
    label: 'displayTime'
  },
  {
    field: 'pageviews',
    label: 'pageviews'
  },
  {
    field: 'action',
    label: 'action'
  }
])

const { register, tableObject, methods } = useTable<TableData>({
  getListApi: getTableListApi,
  response: {
    list: 'list',
    total: 'total'
  },
  props: {
    columns
  }
})

const { getList } = methods

getList()
</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>

参数介绍


interface Response {
  total: number
  list: TableData[]
}

const { register, tableObject, methods, elTableRef } = useTable<TableData>(props: UseTableConfig)

useTable 可以传入自定义类型 <T>

  • T 代表接口返回的表格数据类型。

在实际需求中,可能会遇到分页参数命名不同的情况,请自行在 src/hooks/web/useTable.ts 进行替换,搜索 pageSizepageIndex

props

在使用 useTable 的时候,可以在 props 中传入 getListApi,以及 response,之后就可以手动调用 methods.getList() 方法请求表格数据了。每次表格分页时,则会自动调用接口。

如果需要使用删除方法 methods.delList(),则需要在 props 中传入 delListApi 参数,用于删除时调用接口,目前本项目中单条删除或者批量删除,都是同样的接口同样的参数。如果与实际需求不符,可以自行改造。在 src/hooks/web/useTable.tsdelList 以及 delData 中修改。

// 删除数据
delList: async (ids: string[] | number[], multiple: boolean, message = true) => {
  const tableRef = await getTable()
  if (multiple) {
    if (!tableRef?.selections.length) {
      ElMessage.warning(t('common.delNoData'))
      return
    }
  } else {
    if (!tableObject.currentRow) {
      ElMessage.warning(t('common.delNoData'))
      return
    }
  }
  const paramsObj: AxiosConfig = {
    data: {
      ids
    }
  }
  if (message) {
    ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
      confirmButtonText: t('common.delOk'),
      cancelButtonText: t('common.delCancel'),
      type: 'warning'
    })
      .then(async () => {
        await delData(paramsObj, ids)
      })
      .catch(() => {})
  } else {
    await delData(paramsObj, ids)
  }
}
const delData = async (paramsObj: AxiosConfig, ids: string[] | number[]) => {
  const res = await (config?.delListApi && config?.delListApi(paramsObj))
  if (res) {
    ElMessage.success(t('common.delSuccess'))

    // 计算出临界点
    const currentPage =
      tableObject.total % tableObject.pageSize === ids.length || tableObject.pageSize === 1
        ? tableObject.currentPage > 1
          ? tableObject.currentPage - 1
          : tableObject.currentPage
        : tableObject.currentPage

    tableObject.currentPage = currentPage
    methods.getList()
  }
}

register

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

tableObject

表格对象

属性说明类型可选值默认值
pageSize每页显示多少条number-10
currentPage当前页number-1
total总条数number--
tableList表格数据K[]-[]
parmasObjAxiosConfig 配置L-{}
loading表格是否加载中boolean-false
currentRow当前选中数据Nullable<K>--

methods

方法名说明回调参数
setProps用于表格组件属性(props: Recordable) => void
getList获取表格数据() => Promise<void>
setColumn设置表头结构(columnProps: TableSetPropsType[]) => void
setSearchParams与 Search 组件配置,用于获取 Search 组件返回的查询数据(data: Recordable) => void
getSelections获取多选数据() => Promise<K[]>
delList删除数据接口(ids: string[], multiple: boolean, message?: boolean) => Promise<void>

elTableRef

当前 elTable 实例,可使用所有 elTable 实例方法。

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[]-[]

Columns

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

Pagination

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

Table 方法

方法名说明回调参数
setProps用于设置表格属性(props: Recordable) => void
setColumn用于修改表头结构(columnProps: TableSetPropsType[]) => void

Table 插槽

插槽名说明子标签
append插入至表格最后一行之后的内容, 如果需要对表格的内容进行无限滚动操作,可能需要用到这个 slot。 若表格有合计行,该 slot 会位于合计行之上。-
${field}表格内容-
${field}-header表头内容-