Micro Build Admin

Appearance

Table 表格组件 ​

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

Table 组件位于 src/components/Table 内

注意

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

用法 ​

目前支持的表格组件，你可以在 在线预览 中看到。

基础用法 ​

vue
<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 来使用

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

vue
<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
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 columns = reactive<TableColumn[]>([
  {
    field: 'selection',
    type: 'selection'
  },
  {
    field: 'index',
    label: 'index',
    type: 'index'
  },
  {
    field: 'content',
    label: 'header',
    children: [
      {
        field: 'title',
        label: 'title'
      },
      {
        field: 'author',
        label: 'author'
      },
      {
        field: 'display_time',
        label: 'displayTime'
      },
      {
        field: 'importance',
        label: 'importance',
        formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
          return (
            <ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
              {cellValue === 1
                ? 'important'
                : cellValue === 2
                ? 'good'
                : 'commonly'}
            </ElTag>
          )
        }
      },
      {
        field: 'pageviews',
        label: 'pageviews'
      }
    ]
  },
  {
    field: 'action',
    label: 'action',
    slots: {
      default: (data) => {
        return (
          <ElButton type="primary" onClick={() => actionFn(data)}>
            action
          </ElButton>
        )
      }
    }
  }
])

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

<template>
  <ContentWrap title="treeTable 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>

参数介绍 ​

ts
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 中的 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

MIT Licensed | Copyright (c) 2024 syh-micro-build