对于语言方面组件是默认使用 英语 因为 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 的 ts 版本

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

简要

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

更新预告

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

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 开发中

Keywords

FAQs

What is el-plus-powerful-table-ts?

Is el-plus-powerful-table-ts popular?

Is el-plus-powerful-table-ts well maintained?

Package last updated on 15 Nov 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

el-plus-powerful-table-ts

DOCS

语言