TDesign 更新周报（2022 年 4 月第 2 周）

原创

TDesign

修改于 2022-04-18 18:07:13

2.1K0

修改于 2022-04-18 18:07:13

文章被收录于专栏：TDesign 技术视野・开发篇

组件库

Vue2 for Web 发布 0.40.2 版

Bug Fixes

Form：修复 FormItem slot label 未正常占位的问题
Slider：修复设置 inputnumberProps 属性无效的问题
Upload：
- 修复 remove、selectChange 时间回调异常的问题
- 修复取消上传逻辑异常

Features

Popup： content 尺寸变化后自动更新位置
Slider： label 为 function 时新增 value 和 position 参数
Upload：
- 支持自定义上传文件列表
- 列表型上传支持展示 errorMessage
Checkbox： onChange 事件新增参数 option 表示当前操作对象，current 表示当前操作对象的 value
Table：
- 表格拖拽排序支持完全受控用法
- 列配置功能，onColumnChange 事件新增参数 e 和 currentColumn
- 列配置功能，新增 buttonProps，用于支持完全自定义「列配置按钮」风格和内容
- 列配置功能，新增 placement，用于控制「列配置按钮」相对于表格组件的位置，可选值：左上角、右上角、左下角、右下角
- 列配置功能，新增控制列配置弹窗显示或隐藏属性 columnControllerVisible 和 onColumnControllerVisibleChange，将主要应用于完全需要自定义列配置按钮的业务场景
- BaseTable/Primary/Table/EnhancedTable 新增 bottomContent，用于设置表格底部内容
- 修复当数据量过少时，过滤浮层被隐藏的问题，修复 Safari 浏览器无法显示省略浮层问题
- 树形结构中，新增 toggleExpandData，用于控制行展开
- 树形结构中，无法获取到正确的 rowKey 时，抛出错误，提醒用户修改
- table-layout： fixed 模式，且内容超出时，设置默认列宽为 100，避免出现列宽为 0 消失的情况
- 即使没有行选中列，依然支持 selectedRowKeys 添加类名
- 行选中和行类名透传，同时存在时，自定义行类名透传失效问题
- 修复 tfoot>tr 类名透传失效问题

详情见：https://github.com/Tencent/tdesign-vue/releases/tag/0.40.2

Vue3 for Web 发布 0.12.0 版

⚠️BREAKING CHANGES

重构 Table为 Composition API，存在不兼容更新
- BaseTable HTML 结构变更，写过 CSS 样式覆盖的同学需注意更新样式。由之前的两个 table 分别渲染 thead 和 tbody，更为一个 table
- 行拖拽排序功能，使用方法有调整，从 sortOnRowDraggable 更为 dragSort='col'
- 表头更为使用 th 标签，之前为 td，不符合语义
- 事件 row-db-click 更为 row-dblclick ，onRowDbClick 更为 rowDblclick
- 事件 row-hover 更为 row-mouseover, onRowHover 更为 onRowMouseover
- CSS 类名 t-table__row-first-full-row 更为 t-table__first-full-row，t-table__row-last-full-row 更为 t-table__last-full-row

Bug Fixes

修复 configProvider 警告和 globalConfig 数据响应式问题
修复 Input type=password 时 autocomplete 警告以及 toggle password 问题
修复 Checkbox Group 插槽形式 disabled 属性没有生效
修复 Upload 中 triggerUpload 方法未正确导出和自定义拖拽上传 demo 中 “点击上传” 按钮无效修复 Slider inputNumberProps 未正常透传
修复 Affix onFixedChange 触发时机，在固定状态发生变化时才会触发该事件（改动之前为：滚动一直触发）
修复 Table 的若干 Bug

Features

新增 Collapse 组件，使用 Composition api
新增 Message 的 fadeIn and fadeOut animation
新增 color-picker 渐变预览，改进最近使用色交互
新增 Table 特性
- 排序交互变更：排序方式支持点击直接排序
- 优化表格最后一列 ellipsis 浮层位置底部右对齐
- 新增超出省略功能， ellipsis 支持透传 Popup 组件全部属性
- 新增表尾合计行，支持固定在底部，支持多行合计，支持完全自定义内容
- 新增 loadingProps 透传加载组件全部特性
- 新增固定行（冻结行）
- 新增排序图标自定义，插槽 (slot='filterIcon') 和渲染函数 (props.filterIcon) 均可
- 新增全局配置：过滤图标、空元素、异步加载文本配置、排序按钮文本配置
- 新增 scroll 滚动事件
- 新增表头吸顶功能
- 新增综合功能：多级表头 + 固定表头 + 固定列 + 表头吸顶 + 虚拟滚动 + 自定义列配置
- 过滤功能，条件为真时，高亮筛选图标
- 新增列拖拽排序功能，通过拖拽手柄调整表格排序