DEMO

DOCS

语言

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

el-plus-powerful-table-ts （已更名为 el-plus-powerful-table）

此插件已 el-plus-powerful-table 作为基础，进行重构。部分功能将领先 el-plus-powerful-table 基础版本。 el-plus-powerful-table 的 ts 版本

vue3.0 的 element-plus 二次开发表格组件

简要

• 以下【内部组件】为该文件夹中 packages/components/src 下的组件

更新预告

• 3.0.0 版本
• • 删除 component-event 事件
• • _TYPE 类型的 key 改为枚举

2.2.17 20241127

• 修复 btn-plus 组件中 btn-left 和 btn-right 样式问题

2.2.16 20241115

• 修复类型

2.2.15 20241114

• 更改类型，在声明 header 时，props 下属性 data 属性在不使用 setData 函数时同样可以获得智能提示。已使用 setData 不受影响

const header = [{
  label: '性别',
  props: {
    type: 'text',
    prop: 'gender',
    data: { // 该类型会被推断为 (SetDataType<"input", Lists> & SetDataType<T, Lists>) | undefined
      develop: true,
      // 输入 l 时会提示 line 属性
    },
  }
}]

2.2.14 20241031

• 修复类型错误

2.2.13 20241028

• 修复已知 bug
• 修复类型错误
• 捆绑样式，全局引入情况下无需单独引入样式文件

2.2.10 20241008

• 修复已知 bug

2.2.9 20231205

• 修改暴露的 resetList、getListData 函数支持传递参数
• 修复已知 bug

2.2.8 20231205

• 修复 header 配置项中 props 下属性 filters 的情况下，当前的相应的数据存在值的情况则不会被 filters 过滤

示例说明

const list = [{status: 0},{status: 1}]
const header = [{
  label: '性别',
  props: {
    prop:'status',
    filters: [
      {
        text: '男',
        value: 1
      },
      {
        text: '女',
        value: 0
      }
    ],
  }
}]
// [修复]：第二条数据的 status 将不会进行过滤的情况

• 修复 type = text 时 0 不会显示

2.2.7 20231204

• 类型补充提示

2.2.6 20231124

• PowerfulTableHeaderProps 下 render 函数类型支持返回 JSX.Element

2.2.4/5 20231122

• "image" | "text" | "switch" | "video" | "input" | "iconfont" | "tag" | "rate" | "textarea" 类型中 data 属性下新增 on 可选属性

2.2.3 20231119

• 更改 PowerfulTableExpose 类型为只读
• • PowerfulTableExpose 类型下添加 props、injectProps
• • 修复 PowerfulTableExpose 类型下 headerLists 类型 为 ComputedRef<PowerfulTableHeader<Row>[]> 但是实际类型为 PowerfulTableHeader<Row>[]。更改后类型为 PowerfulTableHeader<Row>[]

2.2.2 20231016

• 更改 list-request.responseKey 属性默认值 'data.data.result' 为 'data.result'
• 更改 list-request.listsKey 属性默认值 'lists' 为 'rows'

2.2.1 20231016

• BtnList 补充 click 属性
• 组件销毁前清除监听事件

2.2.0 20231005

• 新增 type = 'btn' 时，添加 click 属性，需要注意的事，存在 click 属性时将不会触发 beforeClick 属性
• 优化了内部组件 button 文件中的 class 由原来的 class={item.text ? '' : 'no-margin'} 改成空。
• 新增全局组件注入 emptyElement
• 新增全局组件注入 listRequest，以及在 Props 属性上添加。
• 组件添加暴露数据，类型为 PowerfulTableExpose

2.1.15 20230315

• 解决切换批量操作点击确定后选择的批量操作类型永远是第一个 bug
• component-event 自定义事件参数返回更改， 由原来的 { componentName: string, eventType: string } 改为 { componentName: string, eventType: string, index: number, prop: PowerfulTableHeaderProps<any>[] | PowerfulTableHeaderProps<any>, row: any }

2.1.14 20230312

• 解决没有类型提示 bug

2.1.13 20230311

2.1.12 20230311

• 取消将 @element-plus/icons 添加到 es 和 lib

2.1.11 20230311

• 删除 btnConfig.Config 以及 InjectProps 中 btnSlot 参数
• 修复 btn-left 以及 btn-right 插槽无效 bug

2.1.10 20230223

• 修复鼠标悬浮组件没有类型提示 bug

2.1.9 20230222

2.1.8 20230222

2.1.7 20230222

• 修复 treeProps 为 undefined 问题
• 修复类型为 tag 时，数据为 undefined 报错
• type = 'text' data 中的 customFilterFun 属性值更改为 formatting
• PowerfulTableHeaderProps 类型上新增属性 customFilter 自定义过滤

2.1.6 20230221

• 修改自定义过滤头部渲染逻辑

2.1.5 20230216

• 修复未全局安装 element-plus 时引发组件不能使用 bug
• 删除内部组件 input 的 onClick 事件， 因为和 onFocus 重合
• 删除内部组件 rate 的 onClick 事件，因为 ElRate 上不存在 onClick

2.1.3 20230215

• 修复 lib | es 文件夹内 .d.ts 文件中引入的 typings 文件路径找不到

2.1.2 20230214

• 更改打包配置

2.1.1 20230130

• btn-plus 文件重构（vue 改成 tsx)
• • btnConfig 新增属性 btnRightList 类型为 BtnList[]
• • 类型 BtnList 新增属性 tip beforeClick property

2.1.0 20230107

• 删除 btn-plus 组件中 BtnConfig.BtnList 的 type icon showTip tipContent

• 删除 内部组件 data 部分属性（由于提供的属性不完整和 element-plus 存在差异，全部提供则感觉有点冗余，推荐使用 property 属性。内部组件只会保存部分默认值，但是可以通过 property 传参替换）

• • image 删除 lazy zIndex style fit 。保留部分默认值 fit = 'cover'，lazy, preview-teleported = true（el-image 中 lazy preview-teleported 默认 false）
• • input 删除 type placeholder disabled rows。保留部分默认值 rows = 3
• • href 删除 type placeholder rows disabled。 保留部分默认值 type = 'primary'，underline = false
• • rate 删除 max colors iconClass allowHalf showText showScore texts property。 保留部分默认值 disabled = false
• • switch 删除 activeColor inactiveColor inactiveText activeText activeValue inactiveValue disabled isConfirmTip confirmTip beforeFunction 保留部分默认值 inactiveValue = '0'，activeValue = '1'
• • tag 删除 closable type effect hit 保留部分默认值 type = ''
• • video 删除 poster loop 保留部分默认值 controls = true，loop = false
• • button 删除 icon disabled type emit isTooltip isConfirmTip confirmTip 保留部分默认值 type = 'primary'。添加 beforeClick tipProperty 属性

• 内部组件 property 支持函数类型

• componentProps 属性更改为 property

• type 类型为 video 新增 property 扩展属性

• BtnConfig.BtnList 新增 property 扩展属性

• 内部组件新增自定义事件，详情看 type == 'XX'（XX 为某个类型）, 内部组件传递到 powerful-table 组件由 component-event 抛出

• type = 'text' data 中的 customFilterFun 属性值更改

• 修改 组件 InjectProps 类型中 local 的类型。注入的 local 属性现在主要是用于 替换或者扩展组件内部提示文字

• 优化 button 在表格中样式

• 修改 selectable 默认不允许勾选问题

• header 表格头部数据属性中 filters 更改为 defaultFilter. hidden 更改为 defaultShow

• props 单元格数据 filter 更改为 filters

• 删除 组件 props 中的 local

• 使用vite进行构建

• • 构建库模式优化，生成es、cjs两种模式

• element-plus 版本更新到 2.0+

  2.0.7 20220328

• 新增 props property

• • ElTable 属性

• type 为 btn、image、input、rate、switch、tag 的 data 中新增 componentProp 扩展参数

• href 类型更改为 link

• • link 的 data 中新增属性 icon
• • link 的 data 中 text 没有值时将显示 prop 数据在页面上

• input 类型新增 type 同 el-input type

• 修复 rate 类型中 locale 警告

• 优化 link 的 data 中 target 属性类型固定

• 修复 Failed to resolve component: PTBtnPlus 警告

2.0.0 20220314

• 新增支持内置组件导出PT开头：例如:PTImage，PTButton
• • 主要用于 powerful-table-draggable 组件的引用
• switch、btn 类型新增属性
• • isConfirmTip 是否开启点击时确认框提示
• • isConfirmTip 确认框提示文字
• 优化 el-pagination small属性随组件或全局 size 属性更改
• 解决鼠标悬浮在组件上没有类型

1.1.0 20211231

• 新增表格顶部按钮功能
• • 新增配置项 传送门
• • 新增插槽 btn-left btn-right
• header 新增属性
• • isShowOrFilterColumn 是否开启过滤或者显示隐藏列的开关
• • selectable 行是否可以选中
• prop 新增属性
• • filtersType 过滤类型
• • filterItem 指定过滤项

1.0.6 20211226

• 解决数据选中 bug
• 优化部分样式问题
• 优化 props 类型从数组 改为 数组或者对象均可
• 按钮配置优化
• • 可配置二维数组
• • 删除 emit
• • 新增 isTooltip 是否显示提示
• • 新增 params，isMore 属性。params 自定义传入数据，将会在点击按钮时返回。例如：

示例说明

{
  {
    ;('update')
  }
}

// index.vue
;<powerfulTable v-on:btnClick="handleOperate"></powerfulTable>

// row 当前行数据 params 自定义传入的数据 index 当前行的下标
const handleOperate = ({ row, params, index }) => ({})

isMore 用来判断是否将当前对象数据 显示为 更多按钮

{
  ;[
    {
      type: 'btn',
      prop: 'btn',
      data: [
        {
          tip: '编辑',
          type: 'info',
          icon: markRaw(Edit),
          text: '编辑',
          // showBtn: false,
          // isTooltip: true,
          params: {
            emit: 'update',
          },
        },
        [
          {
            tip: '更多',
            isMore: true,
            type: 'success',
            icon: markRaw(Edit),
          },
          {
            tip: '编辑',
            type: 'text',
            icon: markRaw(Edit),
            params: 'update',
          },
          {
            tip: '更多a',
            isMore: true, // 这个将不会被引用到
            type: 'success',
            icon: markRaw(Edit),
          },
          {
            tip: '删除',
            type: 'text',
            icon: markRaw(Delete),
            params: 'remove',
          },
        ],
        {
          tip: '删除',
          type: 'danger',
          icon: markRaw(Delete),
          showBtn: (e: any) => {
            return true
          },
          params: {
            emit: 'remove',
          },
        },
      ],
    },
  ]
}

• 删除 child 字段
• 新增全局组件注入 locale 和 size

Git 贡献提交规范

• 参考 vue 规范 (Angular)

• feat 添加新功能

• fix 修复问题/BUG

• style 代码风格相关，不影响运行结果

• perf 优化/性能提升

• refactor 重构

• revert 撤消 编辑

• test 测试相关

• docs 文档/注释

• chore 依赖更新/脚手架配置修改等

• workflow 工作流程改进

• ci 持续集成

• types 类型定义文件更改

• wip 开发中