ElPlusPowerfulTableTs

TIP

element-plus 二次开发表格组件。此插件已 el-plus-powerful-table 作为基础，进行重构。部分功能将领先 el-plus-powerful-table 基础版本。 el-plus-powerful-table 的 ts 版本。DEMO

语言

对于语言方面组件是默认使用 英语 因为 element-plus 默认是使用英语，不引用中文包的主要原因是避免增大体积。组件内部语言跟随 element-plus。部分提示文字语言，组件内部也支持 中、英 文，如果你需要支持更多语言或者更改组件内部的语言，可以在 use(PowerfulTable, { local: 您的语言变量 }) 替换。也可以参考我们提供的 demo 实现。

使用方法

npmyarnpnpm

npm i el-plus-powerful-table-ts

npm i el-plus-powerful-table-ts

yarn add el-plus-powerful-table-ts

yarn add el-plus-powerful-table-ts

pnpm add el-plus-powerful-table-ts

pnpm add el-plus-powerful-table-ts

main.tsapp.vue

import powerfulTable from "el-plus-powerful-table-ts/es";
import { LangKey } from "el-plus-powerful-table-ts/es/locale/packages";

const app = createApp(App);
app.use(powerfulTable, {
  // 更改组件默认语言
  locale: {
    en: {
      [LangKey.NoData]: '空',
      [LangKey.PackUp]: '收起',
      [LangKey.ReadFullText]: '展开阅读全文',
      // ...
    },
    'zh-cn': {
      [LangKey.NoData]: '空',
      [LangKey.PackUp]: '收起',
      [LangKey.ReadFullText]: '展开阅读全文',
      // ...
    },
  },
});
app.mount("#app");

import powerfulTable from "el-plus-powerful-table-ts/es";
import { LangKey } from "el-plus-powerful-table-ts/es/locale/packages";

const app = createApp(App);
app.use(powerfulTable, {
  // 更改组件默认语言
  locale: {
    en: {
      [LangKey.NoData]: '空',
      [LangKey.PackUp]: '收起',
      [LangKey.ReadFullText]: '展开阅读全文',
      // ...
    },
    'zh-cn': {
      [LangKey.NoData]: '空',
      [LangKey.PackUp]: '收起',
      [LangKey.ReadFullText]: '展开阅读全文',
      // ...
    },
  },
});
app.mount("#app");

vue

<powerful-table :list="list" :header="header" />

<powerful-table :list="list" :header="header" />

Config Attributes

通过 app.use 注入 (优先级小于局部配置)

属性名	说明	TS类型	默认值
`locale`	内部部分文字语言查看可选值	`LangPackages`	-
`listRequest`	列表请求，具体属性查看下方详情	`object`	-
`emptyElement`	列表数据为空时渲染的组件	`Component`	-

Attributes

属性名	说明	TS类型	默认值
`size`	组件大小（默认跟随 `element-plus`）	`string`	`small`
`list`	数据	`array`	-
`header`	表格头部配置	`array`	-
`selectData`	选中的数据	`array`	-
`selectCompare`	选中数据和列表数据相比较的参数`[0]选中数据属性名，[1]列表数据属性名`	`array`	`['id', 'id']`
`isSelect`	是否显示多选	`boolean`	`false`
`listRequest`	列表请求	`object`	-
`selectable`	当前行是否可以选中	`function`	-
`isPagination`	是否显示分页器	`boolean`	`false`
`operateData`	批量操作	`object`	-
`btnConfig`	表格顶部按钮配置	`object`	-
`tree`	树形表格配置	`object`	-
`paginationProperty`	分页器组件扩展字段	`object`	-
`property`	表格组件扩展字段	`object`	-

ListRequest

TIP

使用方式

属性名	说明	TS类型	默认值
`pageNoKey`	页数 `key`	`string`	`'pageNo'`
`pageSizeKey`	条数 `key`	`string`	`'pageSize'`
`responseKey`	返回值 `key`，多层数据结构使用 `.` 连接	`string`	`'data.result'`
`totalKey`	总条数 `key`	`string`	`'total'`
`listsKey`	数据 `key`	`string`	`'rows'`

当使用组件传递 ListRequest 时（非全局注入），格外新增 2 个属性

属性名	说明	TS类型	默认值
`listQuery`	请求格外参数	`object`	`{}`
`listApi`	请求接口	`function`	-

OperateData

TIP

如果表格有 header.props.type 为 input 的则需要先填写该行数据，在选中该行，否则会出现获取不到 input 的值

属性名	说明	TS类型	默认值
`value`	下拉选中值	`string`	-
`style`	按钮样式	`CSSProperties`	-
`prop`	批量操作后 `batchOperate` 返回的 `ids` 中的数据是根据指定 `prop` 返回数组	`string`	`id`
`btnProperty`	`el-button` 组件扩展字段 (支持 `el-button` 组件所有属性名)	`object`	-
`selectProperty`	`el-select` 组件扩展字段 (支持 `el-select` 组件所有属性名)	`object`	-
`operates`	批量操作下拉框数据	`array`	-

OperateData Operates

属性名	说明	TS类型	默认值
`label`	批量操作下拉框显示文字	`string`	-
`value`	批量操作下拉框值	`string`	-

BtnConfig

属性名	说明	TS类型	默认值
`btnRightList`	右侧按钮配置	`array`	-
`btnList`	左侧按钮配置	`array`	-

BtnConfig BtnList

属性名	说明	TS类型	默认值
`style`	样式	`CSSProperties`	-
`disabled`	是否禁用如果为 `true` 那么 `operateType` 的属性名将会失效	`boolean`	-
`operateType`	操作类型：`none 默认` (不需要选择数据)，`single` (只能操作一条数据)，`batch` (批量操作数据(至少选择一条数据以上))	`object`	-
`text`	按钮文字	`string`	-
`effect`	自定义数据将会在自定义事件 `btn-plus-change` 抛出	`string`	-
`showBtn`	控制按钮显示隐藏	`function / boolean`	-

属性名	说明	TS类型	默认值
`overflowTooltip`	当内容过长被隐藏时显示	`boolean`	`false`
`label`	显示的标题	`string`	-
`minWidth`	对应列的最小宽度	`string / number`	`140`
`width`	对应列的宽度	`string / number`	-
`sortable`	排序	`string / boolean`	`false`
`fixed`	固定列	`string / boolean`	`false`
`headerAlign`	表头对齐方式	`enum`	`'center'`
`headerSlotName`	列头插槽	`string`	-
`defaultShow`	当前列默认显示或隐藏	`boolean`	`true`
`defaultFilter`	当前列默认是否过滤 `(isShowOrFilterColumn == 'filter' 时默认 true)`	`boolean`	`false`
`isShowOrFilterColumn`	右侧按钮选择列时是否显示（隐藏和筛选开关组件）	`string / boolean`	-
`props`	单元格数据	`object`	-
`property`	`el-table-column` 组件扩展字段 (支持 `el-table-column` 组件所有属性名)	`object`	-

Props

属性名	说明	TS类型	默认值
`prop`	数据 `key` 值	`string`	-
`type`	数据类型	`enum`	`'text'`
`data`	每个类型不一样 `data` 里值也不一样	`_TYPE['xxx']`	-
`filters`	过滤，只支持 `type` 为 `text、tag`	`array / function`	`number`
`filtersType`	过滤类型用于表格顶部右侧列按钮点击时，是否过滤，如果是则自定义表头将根据类型所弹出相应的操作元素（如果指定了 `headerSlotName` 和 `isShowOrFilterColumn` 为 `show` 或者 `false` 将会无效。如果是 `filtersType: select` 需要指定 `filters` 为数组类型）	`string`	`'input'`
`filterItem`	指定过滤项 (当 `props` 是数组且长度大于 `1` 时有用) 如果多个 `prop` 的情况下没有指定 `filterItem` 过滤项那么将使用第一个作进行过滤	`boolean`	-
`customFilter`	自定义过滤数据 `v(参数为值)，column(参数为header配置项)，resolve(回调函数传递数组)`	`function`	-
`text`	数据左侧显示的文字	`string`	-
`reserve`	当 `prop` 值渲染数据为空时可用 `reserve` 代替空数据可传 `HTML` 标签	`HTMLElement / string`	`'no Data'`
`render`	渲染函数	`function`	-
`style`	样式	`CSSProperties`	-
`slotName`	插槽名称	`string`	`'default'`

Filters

属性名	说明	TS类型	默认值
`key`	单元格里的数据	`string`	-
`value`	需要替换的值	`string`	-

Data

// ...
data: setData<'image', any>({
  style: {
    borderRadius: '10px',
  },
  property: ({ row, index, props }) => {
    // console.log(row, index, props)
    return {
      // src: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',
    }
  },
})
// ...

// ...
data: setData<'image', any>({
  style: {
    borderRadius: '10px',
  },
  property: ({ row, index, props }) => {
    // console.log(row, index, props)
    return {
      // src: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',
    }
  },
})
// ...

TIP

内部组件中的 Emit 事件将会抛出在 component-emit 上。具体内部组件中有哪些事件返回什么参数，将会在下面文档详细介绍。

Type is Text（default）

属性名	说明	TS类型	默认值
`line`	超出多少的行数使用 `...` 代替	`number`	`3`
`develop`	是否显示 `“展开 / 收起”` 操作按钮	`boolean`	`false`
`formatting`	自定义当前单元格数据文本。`props` 为 `header` 配置的当前 `props` 值	`function`	-
`on`	事件对象，接收下面 `Emit` 相应方法名称	`object`	-

Text Emit/Event

方法名	说明	类型
`click`	点击触发	`function`

Type is Image

属性名	说明	TS类型	默认值
`style`	图片自定义样式	`CSSProperties`	-
`property`	属性扩展字段 (支持 `el-image` 组件所有属性名)	`object / function`	-
`on`	事件对象，接收下面 `Emit` 相应方法名称	`object`	-

// ...
{
    label: '图片', //显示的标题
    props: [
      {
        type: 'image',
        prop: 'imageUrl',
        data: setData<'image', Lists>({
          on: {
            load: ({row, index, props}, evt) => {},
            error: ({row, index, props}, evt) => {}
          }
        }),
      },
    ],
  },
// ...

// ...
{
    label: '图片', //显示的标题
    props: [
      {
        type: 'image',
        prop: 'imageUrl',
        data: setData<'image', Lists>({
          on: {
            load: ({row, index, props}, evt) => {},
            error: ({row, index, props}, evt) => {}
          }
        }),
      },
    ],
  },
// ...

Image Emit/Event

方法名	说明	类型
`load`	图片加载成功触发	`e: Event`
`error`	图片加载成功触发	`e: Error`
`switch`	图片加载成功触发	`index: number`
`close`	图片加载成功触发	-

Type is Btn

属性名	说明	TS类型	默认值
`tip`	提示文字	`string`	-
`text`	按钮文字	`string`	-
`style`	按钮样式	`CSSProperties`	-
`showBtn`	控制按钮显示隐藏	`function`	-
`beforeClick`	点击前事件, `props(当前配置的props) btnIndex(按钮下标) resolve(回调函数，传递boolean)`	`function`	-
`click`	点击事件, 传入 `click` 时 `beforeClick` 失效	`function`	-
`params`	自定义数据	`any`	-
`isMore`	是否更多当 `data` 是二维数组时有效	`boolean`	`false`
`property`	属性扩展字段 (支持 `el-button` 组件所有属性名)	`object / function`	-
`tipProperty`	属性扩展字段	`object`	-

Type is Switch

属性名	说明	TS类型	默认值
`style`	开关自定义样式	`CSSProperties`	-
`property`	属性扩展字段 (支持 `el-switch` 组件所有属性名)	`object / function`	-
`on`	事件对象，接收下面 `Emit` 相应方法名称	`object`	-

Switch Emit/Event

方法名	说明	类型
`change`	`switch` 状态发生变化时的回调函数	`val` 新状态的值

Type is Input or Textarea

属性名	说明	TS类型	默认值
`style`	输入框样式	`CSSProperties`	-
`slot`	输入框前置或后置	`enum`	-
`symbol`	文字或者符号在插槽中显示	`string`	-
`property`	属性扩展字段 (支持 `el-input` 组件所有属性名)	`object / function`	-
`on`	事件对象，接收下面 `Emit` 相应方法名称	`object`	-

Input Emit/Event

方法名	说明	类型
`blur`	输入框失去焦点时触发	`event: FocusEvent`
`focus`	输入框获得焦点时触发	`event: FocusEvent`
`change`	数据改变时，当输入框失去焦点或用户按 Enter 时触发	`value: string \| number`
`input`	在 `Input` 值改变时触发	`value: string \| number`
`clear`	点击由 `clearable` 属性生成的清空按钮时触发	-

Type is Video

属性名	说明	TS类型	默认值
`style`	样式	`CSSProperties`	-
`property`	属性扩展字段 (支持 `video` 标签所有属性名)	`object / function`	-
`on`	事件对象，接收下面 `Emit` 相应方法名称	`object`	-

Video Emit/Event

方法名	说明	类型
`play`	点击触发	`object`
`pause`	点击触发	`object`

Type is Iconfont

属性名	说明	TS类型	默认值
`class`	样式类	`string \| string[]`	-
`style`	图标自定义样式	`CSSProperties`	-
`on`	事件对象，接收下面 `Emit` 相应方法名称	`object`	-

Iconfont Emit/Event

方法名	说明	类型
`click`	点击触发	`object`

Type is Rate

属性名	说明	TS类型	默认值
`style`	样式	`CSSProperties`	-
`property`	属性扩展字段 (支持 `el-rate` 组件所有属性名)	`object / function`	-
`on`	事件对象，接收下面 `Emit` 相应方法名称	`object`	-

Rate Emit/Event

方法名	说明	类型
`change`	值改变触发	`val` 改变后的值

Type is Href

属性名	说明	TS类型	默认值
`style`	自定义样式	`CSSProperties`	-
`target`	跳转类型	`enum`	`'\_blank'`
`text`	所显示的文本	`string / function`	-
`property`	属性扩展字段 (支持 `el-link` 组件所有属性名)	`object / function`	-

Type is Slot

index-data.tsapp.vue

import type { PowerfulTableHeader } from 'el-powerful-table-ts/es/typings'

interface Lists {
  id: 1
}
export const header: PowerfulTableHeader<Lists>[] = [
  {
    label: "slot（插槽）", //显示的标题
    props: [
      {
        type: "slot",
        slotName: "A",
      },
    ],
  }
]

import type { PowerfulTableHeader } from 'el-powerful-table-ts/es/typings'

interface Lists {
  id: 1
}
export const header: PowerfulTableHeader<Lists>[] = [
  {
    label: "slot（插槽）", //显示的标题
    props: [
      {
        type: "slot",
        slotName: "A",
      },
    ],
  }
]

vue

<powerful-table>
  <template #A="{ row,index }">
    <div>
      <el-image
        style="width: 100px; border-radius: 10px"
        :src="row.imageUrl"
      ></el-image>
    </div>
  </template>
</powerful-table>

<powerful-table>
  <template #A="{ row,index }">
    <div>
      <el-image
        style="width: 100px; border-radius: 10px"
        :src="row.imageUrl"
      ></el-image>
    </div>
  </template>
</powerful-table>

Type is Tag

属性名	说明	TS类型	默认值
`color`	背景颜色，返回颜色值	`function`	-
`number`	需要显示前多少个	`number`	`3`
`property`	属性扩展字段 (支持 `el-tag` 组件所有属性名)	`object / function`	-

Tag Emit/Event

方法名	说明	类型
`click`	点击触发	`object`
`close`	关闭 Tag 时触发的事件	-

Emits

事件名	说明	类型
`size-change`	分页器切换, `select` 所有页中选中的数据	`function`
`sort-custom`	远程排序	`function`
`batch-operate`	批量操作	`function`
`btn-click`	表格操作按钮	`function`
`btn-plus-change`	表格顶部左侧操作按钮，`rows` 返回所有选中的行	`function`
`btn-plus-refresh`	表格顶部刷新按钮	-
`row-click`	行点击事件	`function`
`component-event`	内部组件事件	`function`

Slots

插槽名	说明
`btn-left`	表格顶部左侧按钮
`btn-right`	表格顶部右侧按钮
`empty`	表格内数据为空时内容
`refresh`	刷新
`[slotName]`	表格内自定义的插槽名称
`[headerSlotName]`	表格列头内自定义的插槽名称

Utils

函数名	说明	TS类型
`getType`	获取变量类型	`function`
`deepClone`	深度克隆	`function`
`isTypeProtect`	类型保护搜索 "用户自定义的类型保护"	`function`
`setData`	设置 `PowerfulTableHeaderProps` 类型下 `data` 数据，可以获得更好的类型提示	`function`

index.ts

import { getType, deepClone,isTypeProtect, setData } from 'el-plus-powerful-table/es'
import { log } from 'console'

log(getType('1')) // 'String'
log(getType(1)) // 'Number'
log(getType({})) // 'Object'
// ...

const a = {a: 1, b: {a: 2, c: {a: 3}}}
const b = deepClone(a)
log(a === b) // false

let c: number | []
c += 1 // ts 报错
if (isTypeProtect<typeof c, number>(c, (data) => typeof data === 'number')) {
  c += 1 // 正常
}

const headers: PowerfulTableHeader<Lists>[] = [{
  label: '图片',
  props: [
    {
      type: 'image',
      prop: 'imageUrl',
      data: setData<'image', Lists>({
        // 在这里输入的时候 idea 会提示有哪些属性
      }),
    },
  ],
}]

import { getType, deepClone,isTypeProtect, setData } from 'el-plus-powerful-table/es'
import { log } from 'console'

log(getType('1')) // 'String'
log(getType(1)) // 'Number'
log(getType({})) // 'Object'
// ...

const a = {a: 1, b: {a: 2, c: {a: 3}}}
const b = deepClone(a)
log(a === b) // false

let c: number | []
c += 1 // ts 报错
if (isTypeProtect<typeof c, number>(c, (data) => typeof data === 'number')) {
  c += 1 // 正常
}

const headers: PowerfulTableHeader<Lists>[] = [{
  label: '图片',
  props: [
    {
      type: 'image',
      prop: 'imageUrl',
      data: setData<'image', Lists>({
        // 在这里输入的时候 idea 会提示有哪些属性
      }),
    },
  ],
}]

Expose

属性名	说明	类型
`$slots`	所传递的插槽名称	`object`
`$attrs`	所传递的属性并且非 `props` 定义的属性名. 文档	`object`
`$refs`	表格 `Ref` 实例	`object`
`props`	表格 `props` 属性	`object`
`injectProps`	使用 `app.use` 时注入的数据	`object`
`headerLists`	过滤隐藏后的列	`array`
`powerfulTableData`	内置数据也就是 vue2 中的 data	`object`
`stateData`	状态数据	`object`
`resetList`	重置数据发送请求	`function`
`getListData`	重新发送请求	`function`
`handleSelectionChange`	添加选中行	`function`
`anewRender`	重新计算表格布局位置	`function`

ElPlusPowerfulTableTs ​

标签 ​

语言 ​

使用方法 ​

Config Attributes ​

Attributes ​

ListRequest ​

OperateData ​

OperateData Operates ​

BtnConfig ​

BtnConfig BtnList ​

Header ​

Props ​

Filters ​

Data ​

Type is Text（default） ​

Text Emit/Event ​

Type is Image ​

Image Emit/Event ​

Type is Btn ​

Type is Switch ​

Switch Emit/Event ​

Type is Input or Textarea ​

Input Emit/Event ​

Type is Video ​

Video Emit/Event ​

Type is Iconfont ​

Iconfont Emit/Event ​

Type is Rate ​

Rate Emit/Event ​

Type is Href ​

Type is Slot ​

Type is Tag ​

Tag Emit/Event ​

Emits ​

Slots ​

Utils ​

Expose ​