idux icon indicating copy to clipboard operation
idux copied to clipboard

[pro:table] 高级表格组件需求收集

Open danranVm opened this issue 3 years ago • 8 comments

  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

对表格组件提供更加高级的封装,提供更加高效,便捷的使用方式。

What does the proposed API look like?

表格功能集

基础功能

IxTable 中已经集成的功能

通用能力

  • [x] 自动高度:autoHeight
  • [x] 有无边框: borderless
  • [x] 自定义事件和样式: customAdditional
    • [x] 行样式,例如:斑马纹
    • [x] 各种原生事件
  • [x] 文本超长处理:ellipsis
  • [x] 自定义空数据内容:empty
  • [x] 自定义表格头部:hader
  • [x] 表格分页: pagination
  • [x] 表格宽高和滚动条, :scroll
    • [x] 固定表头
  • [x] 大小: size
  • [x] 加载中:spin
  • [x] 粘性表头(吸顶): sticky
  • [x] 虚拟滚动:virtual
  • [ ] 自定义页尾(总结栏)

列配置

  • [x] 对齐方式: column.align
  • [x] 合并单元格:column.colSpan + column.rowSpan
  • [x] 合并表头:column.titleColSpan
  • [x] 表头分组:column.children
  • [x] 固定列: column.fixed
  • [x] 表格宽度: column.width
  • [x] 自定义渲染单元格: column.customCell
  • [x] 自定义渲染表头:column.customTitle
  • [x] 排序:column.sortable
    • [x] 单列
    • [x] 多列
    • [x] 服务端
  • [x] 筛选:column.filterable
    • [x] 单字段
    • [x] 多字段
    • [x] 服务端
    • [x] 自定义下拉菜单
  • [ ] 可展开:column.type === 'expandable'
    • [x] 单行展开
    • [x] 树型表格
    • [ ] 嵌套表格(其实就是单行展开,样式可能还需要优化)
  • [x] 可选择:column.type === 'selectable'
    • [x] 单选
    • [x] 多选
    • [x] 点击行选择(单击,双击)
    • [x] 选择全部,当前页,反选,取消全部,自定义规则

高级功能

IxProTable 中扩展的功能

  • [ ] 表格头部工具栏 (可能以插件的形式提供)
    • [ ] 刷新
    • [ ] 导入
    • [ ] 导出
    • [ ] 打印
  • [ ] 布局设置: IxProTableLayoutTool
    • [x] 列显示隐藏 column.changeVisiable
    • [x] 列拖拽排序 column.changeIndex
    • [x] 列固定 column.changeFixed
    • [ ] 列搜索
    • [ ] 表格大小调整
  • [x] 列宽拖动 column.resizable
  • [ ] 行拖拽排序
  • [ ] 表格行修改,删除,新增
    • [ ] 编辑
    • [ ] 删除
    • [ ] 新增
  • [ ] 右键菜单
  • [ ] 快捷渲染方式(其实就是一些 cusotmCell, 感觉可以不用提供,业务自己封装几个常用的就好了)
    • [x] 行号: column.type === 'indexable'
    • [ ] 数字
    • [ ] 金钱
    • [ ] tag
    • [ ] badge
    • [ ] enum
  • [ ] 快捷键
    • [ ] 按住 control 后,快速选择

danranVm avatar Feb 22 '22 03:02 danranVm

Translation of this issue:

[Pro: Table] Advanced Table Components Demand Collection

  • [x] i Have Searched The [https://github.com/iduxfe/idux/issues) of this repository and believe That this is not a duplicate.

What proBLEES THIS Feature SOLVE?

Provide a more advanced package for table components, providing more efficient, convenient ways.

What does The proposed API Look Like?

Reference: https://procomponents.ant.design/components/table

idux-bot[bot] avatar Feb 22 '22 03:02 idux-bot[bot]

  • 嵌套子表格
  • 支持快捷键,比如,按住shift后勾选两行,可以把两行之间的行都选上。

brenner8023 avatar Feb 22 '22 08:02 brenner8023

子表格,在基础组件中就已经实现了,不过样式可能还有问题,需要调整一下。 快捷键这个,可以更详细的列一下么?不然就只能想到一个实现一个?

danranVm avatar Feb 22 '22 12:02 danranVm

快捷键这个,可以更详细的列一下么?不然就只能想到一个实现一个?

idux的表格不属于那种腾讯文档可编辑复杂表格,快捷键只需要实现最常用的就行了。具体可看这个issue: https://github.com/TuSimple/naive-ui/issues/554

brenner8023 avatar Feb 22 '22 12:02 brenner8023

1.通过浮层控制列的显示隐藏(包含全选/反选)、控制列的顺序、控制列的固定、重置(包含显示隐藏列及列的顺序和固定列) 2.列的默认配置:a.显示隐藏 b.列的固定(左固定,不固定,右固定) 3.列宽的调整 4.嵌套表格(分组形式,嵌套页面形式两种) 5.可编辑表格 6.行的拖拽排序 7.列的筛选(表头漏斗的形式) 8.跨页全选(需考虑远程分页、排序、过滤的场景)

hele10086 avatar Feb 22 '22 15:02 hele10086

  • 行编辑,单元格编辑(可配置)
  • 多列排序

Darma1106 avatar Feb 24 '22 12:02 Darma1106

  • 支持行上下拖动
  • 支持列左右拖动

lvzero535 avatar Mar 01 '22 09:03 lvzero535

表格几乎全部的功能都已经列出来了,主要的核心功能都已经完成。 还剩余部分高级的扩展功能后续也会慢慢完善。 有感兴趣的功能也欢迎直接 PR, welcome。

danranVm avatar Jun 11 '22 03:06 danranVm