table ​

介绍 ​

以 element-plus 为例，该组件将其 table 组件，pagination组件进行了整合, 并扩展了一些slot，如：cellSlot（单元格插槽）、columnSlot（列插槽）、customHeaderSlot（自定义表头插槽），可以让开发者灵活的定义。除此之外，该组件还提供了一个 deleteRow 实例方法，用于删除某一行并更新 table 数据。

因为该组件是通过 component vue 的内置组件渲染 el-table 的，这使得 unplugin-vue-components 不会自动引入 el-table 相关组件相关Issue，因此你需要手动导入组件。如果在使用改组件之前， unplugin-vue-components 已经自动导入了 el-table 的相关组件，则无需手动导入以下配置。

举个例子：

在使用 pin-table 之前你并没有直接使用 el-table 组件，这个时候 components.d.ts 的配置，如下：

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core'

export {}

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    PinFilterGroup: typeof import('pinos-ui')['PinFilterGroup']
  }
}

这个时候你就需要手动引入 el-table 组件及它相关组件(如果你开启了 showPagination, 你还需要手动导入 el-pagination 组件)

• 新建一个 element-plus 导入文件

// element-plus/index.ts
import {  ElTable ElTableColumn, ElEmpty } from 'element-plus'
import type { App } from 'vue'
import 'element-plus/es/components/table/style/css'
import 'element-plus/es/components/table-column/style/css'
import 'element-plus/es/components/empty/style/css'

export default function (app: App) {
  app.component(ElTable.name, ElTable)
  app.component(ElEmpty.name, ElEmpty)
  app.component(ElTableColumn.name, ElTableColumn)
}

• 在入口文件中使用该配置

// main.ts

import InstallElementPlus from './element-plus/index'
// ...

createApp(App).use(InstallElementPlus)

背景 ​

在多数的组件库，如：naiveui、vexipui、antdv 中都有 table 组件，且它们都有一个共同点，都是通过配置的方式去渲染的。但是 element-plus 中的 table 组件则是通过 el-table-column 组件去渲染每一列，这也就意味着，我们需要写许多次 el-table-column，这样我感觉代码不够简洁和直观。因此封装了这该组件用于解决这个问题。

代码示例 ​

自定义表头 ​

展开行 ​

树形数据与懒加载 ​

合并行或列 ​

多级表头并自定义某个单元格的内容 ​

索引（默认会根据分页自动累加） ​

事件绑定 ​

空插槽 ​

空插槽(prop配置的形式)，该配置的应用场景一般配合 config-provide 使用，用于配置全局的空状态 ​

删除某一列 ​

当总页数小于等于 1 时，不会调用刷新函数，而是直接删除当前列。当总页数大于 1 且非最后一页时，则会自动请求接口来更新列表

config-provide 全局配置table组件 ​

综合使用 ​

如果配置了 update-methods 属性，在分页触发 size-change 和 current-change 时会自动调用 table 的更新数据方法

Table 属性 ​

TableColumnProps ​

该属性在 tableColumn 的 props 配置的基础上扩展了以下几个属性：

Table 插槽 ​

Table 组件实例方法 ​