[Table] 表格支持编辑单元格

examples/table/demos/editable-cell.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <!-- 当前示例包含：输入框、单选、多选、日期 等场景 -->
+    <t-table row-key="key" :columns="columns" :data="data" bordered />
+  </div>
+</template>
+
+<script>
+import {
+  Input, Select, DatePicker, MessagePlugin,
+} from 'tdesign-vue';
+
+const initData = new Array(5).fill(null).map((_, i) => ({
+  key: String(i + 1),
+  firstName: ['Eric', 'Gilberta', 'Heriberto', 'Lazarus', 'Zandra'][i % 4],
+  framework: ['Vue', 'React', 'Miniprogram', 'Flutter'][i % 4],
+  email: [
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+    '[email protected]',
+  ][i % 4],
+  letters: [['A'], ['B', 'E'], ['C'], ['D', 'G', 'H']][i % 4],
+  createTime: ['2021-11-01', '2021-12-01', '2022-01-01', '2022-02-01', '2022-03-01'][i % 4],
+}));
+
+export default {
+  name: 'TTableEditableCell',
+
+  data() {
+    return {
+      align: 'left',
+      data: [...initData],
+    };
+  },
+
+  computed: {
+    columns() {
+      return [
+        {
+          title: 'FirstName',
+          colKey: 'firstName',
+          align: this.align,
+          // 编辑状态相关配置，全部集中在 edit
+          edit: {
+            // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
+            // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
+            component: Input,
+            // props, 透传全部属性到 Input 组件
+            props: {
+              clearable: true,
+              autofocus: true,
+            },
+            // 编辑完成，退出编辑态后触发
+            onEdited: (context) => {
+              this.data.splice(context.rowIndex, 1, context.newRowData);
+              console.log('Edit firstName:', context);
+              MessagePlugin.success('Success');
+            },
+            // 校验规则，此处同 Form 表单
+            rules: [
+              { required: true, message: '不能为空' },
+              { max: 10, message: '字符数量不能超过 10', type: 'warning' },
+            ],
+          },
+        },
+        {
+          title: 'Framework',
+          colKey: 'framework',
+          edit: {
+            component: Select,
+            // props, 透传全部属性到 Select 组件
+            props: {
+              clearable: true,
+              options: [
+                { label: 'Vue', value: 'Vue' },
+                { label: 'React', value: 'React' },
+                { label: 'Miniprogram', value: 'Miniprogram' },
+                { label: 'Flutter', value: 'Flutter' },
+              ],
+            },
+            // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
+            abortEditOnEvent: ['onChange'],
+            // 编辑完成，退出编辑态后触发
+            onEdited: (context) => {
+              this.data.splice(context.rowIndex, 1, context.newRowData);
+              console.log('Edit Framework:', context);
+              MessagePlugin.success('Success');
+            },
+          },
+        },
+        {
+          title: 'Letters',
+          colKey: 'letters',
+          cell: (h, { row }) => row.letters.join('、'),
+          edit: {
+            component: Select,
+            // props, 透传全部属性到 Select 组件
+            props: {
+              multiple: true,
+              minCollapsedNum: 1,
+              options: [
+                { label: 'A', value: 'A' },
+                { label: 'B', value: 'B' },
+                { label: 'C', value: 'C' },
+                { label: 'D', value: 'D' },
+                { label: 'E', value: 'E' },
+                { label: 'G', value: 'G' },
+                { label: 'H', value: 'H' },
+              ],
+            },
+            // abortEditOnEvent: ['onChange'],
+            onEdited: (context) => {
+              this.data.splice(context.rowIndex, 1, context.newRowData);
+              console.log('Edit Letters:', context);
+              MessagePlugin.success('Success');
+            },
+          },
+        },
+        {
+          title: 'Date',
+          colKey: 'createTime',
+          // props, 透传全部属性到 DatePicker 组件
+          edit: {
+            component: DatePicker,
+            props: {
+              mode: 'date',
+            },
+            // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
+            abortEditOnEvent: ['onChange'],
+            onEdited: (context) => {
+              this.data.splice(context.rowIndex, 1, context.newRowData);
+              console.log('Edit Date:', context);
+              MessagePlugin.success('Success');
+            },
+          },
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<style scoped>
+.table-operations {
+  margin-bottom: 16px;
+}
+
+.table-operations > button {
+  margin-right: 8px;
+}
+</style>

examples/table/table.md

@@ -155,6 +155,7 @@ checkProps | Object / Function | - | 透传参数，`colKey` 值为 `row-select`
 children | Array | - | 用于多级表头，泛型 T 指表格数据类型。TS 类型：`Array<PrimaryTableCol<T>>` | N
 colKey | String | - | 渲染列所需字段，必须唯一。值为 `row-select` 表示当前列为行选中操作列。值为 `drag` 表示当前列为拖拽排序操作列 | N
 disabled | Function | - | 是否禁用行选中，`colKey` 值为 `row-select` 时，配置有效。TS 类型：`(options: {row: T; rowIndex: number }) => boolean` | N
+edit | Object | - | 可编辑单元格配置项，具体属性参考文档 `TableEditableCellConfig` 描述。TS 类型：`TableEditableCellConfig<T>` | N
 filter | Object | - | 过滤规则，支持多选(multiple)、单选(single)、输入框(input) 等三种形式。想要自定义过滤组件，可通过 `filter.component` 实现，自定义过滤组件需要包含参数 value 和事件 change。TS 类型：`TableColumnFilter` | N
 render | Function | - | 自定义表头或单元格，泛型 T 指表格数据类型。TS 类型：`TNode<PrimaryTableRenderParams<T>>` `interface PrimaryTableRenderParams<T> extends PrimaryTableCellParams<T> { type: RenderType }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 sorter | Boolean / Function | false | 该列是否支持排序。值为 true 表示该列支持排序；值类型为函数，表示对本地数据 `data` 进行排序，返回值参考 [MDN Array.sort](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)。泛型 T 指表格数据类型。TS 类型：`boolean | SorterFun<T>` `type SorterFun<T> = (a: T, b: T) => number`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
@@ -185,11 +186,16 @@ tree-expand-change | `(context: TableTreeExpandChangeContext<T>)` | 树形结构
 
 名称 | 参数 | 返回值 | 描述
 -- | -- | -- | --
+appendTo | `(key: TableRowValue, newData: T)` | \- | 必需。树形结构中，为当前节点添加子节点。如果 `key` 为空，则表示为根节点添加子节点
 expandAll | \- | \- | 必需。展开全部行
 foldAll | \- | \- | 必需。折叠全部行
 getData | `(key: TableRowValue)` | `TableRowState<T>` | 必需。树形结构中，用于获取行数据所有信息。泛型 `T` 表示行数据类型。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`type TableRowValue = string | number`<br/>
+getTreeNode | \- | `T[]` | 必需。树形结构中，获取完整的树形结构
+insertAfter | `(key: TableRowValue, newData: T)` | \- | 必需。树形结构中，在当前节点之后添加子节点
+insertBefore | `(key: TableRowValue, newData: T)` | \- | 必需。树形结构中，在当前节点之前添加子节点
 remove | `(key: TableRowValue)` | \- | 必需。树形结构中，移除指定节点
 setData | `(key: TableRowValue, newRowData: T)` | \- | 必需。树形结构中，用于更新行数据。泛型 `T` 表示行数据类型
+swapData | `(params: SwapParams<T>)` | \- | 必需。树形结构中，交换两个节点的顺序。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts)。<br/>`interface SwapParams<T> { current: T; target: T; currentIndex: number; targetIndex: number }`<br/>
 toggleExpandData | `(p: { row: T,  rowIndex: number})` | \- | 必需。展开或收起树形行
 
 ### TableRowState
@@ -221,11 +227,11 @@ type | String | - | 用于设置筛选器类型：单选按钮筛选器、复选
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-bufferSize | Number | 20 | 表示表格除可视区域外，额外渲染的行数，避免表格快速滚动过程中，新出现的内容来不及渲染从而出现空白 | N
-isFixedRowHeight | Boolean | false | 表示表格每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值 | N
-rowHeight | Number | - | 表格的行高，不会给`<tr>`元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为表格每行平均高度，从而使得表格滚动过程更加平滑 | N
+bufferSize | Number | 20 | 表示除可视区域外，额外渲染的行数，避免快速滚动过程中，新出现的内容来不及渲染从而出现空白 | N
+isFixedRowHeight | Boolean | false | 表示每行内容是否同一个固定高度，仅在 `scroll.type` 为 `virtual` 时有效，该属性设置为 `true` 时，可用于简化虚拟滚动内部计算逻辑，提升性能，此时则需要明确指定 `scroll.rowHeight` 属性的值 | N
+rowHeight | Number | - | 行高，不会给`<tr>`元素添加样式高度，仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置，可尽量将该属性设置为每行平均高度，从而使得滚动过程更加平滑 | N
 threshold | Number | 100 | 启动虚拟滚动的阈值。为保证组件收益最大化，当数据量小于阈值 `scroll.threshold` 时，无论虚拟滚动的配置是否存在，组件内部都不会开启虚拟滚动 | N
-type | String | - | 必需。表格滚动加载类型，有两种：懒加载和虚拟滚动。<br />值为 `lazy` ，表示表格滚动时会进行懒加载，非可视区域内的表格内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；<br />值为`virtual`时，表示表格会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，表格仅渲染该可视区域内的表格内容，当表格需要展示的数据量较大时，建议开启该特性。可选项：lazy/virtual | Y
+type | String | - | 必需。滚动加载类型，有两种：懒加载和虚拟滚动。<br />值为 `lazy` ，表示滚动时会进行懒加载，非可视区域内的内容将不会默认渲染，直到该内容可见时，才会进行渲染，并且已渲染的内容滚动到不可见时，不会被销毁；<br />值为`virtual`时，表示会进行虚拟滚动，无论滚动条滚动到哪个位置，同一时刻，仅渲染该可视区域内的内容，当需要展示的数据量较大时，建议开启该特性。可选项：lazy/virtual | Y
 
 ### TableColumnController
 
@@ -239,6 +245,16 @@ fields | Array | - | 用于设置允许用户对哪些列进行显示或隐藏
 hideTriggerButton | Boolean | false | 是否隐藏表格组件内置的“列配置”按钮 | N
 placement | String | top-right | 列配置按钮基于表格的放置位置：左上角、右上角、左下角、右下角等。可选项：top-left/top-right/bottom-left/bottom-right | N
 
+### TableEditableCellConfig
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+abortEditOnEvent | Array | - | 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态。示例：`abortEditOnEvent: ['onChange']`。TS 类型：`string[]` | N
+component | \- | - | 组件定义，如：`Input` `Select`。对于完全自定义的组件（非组件库内的组件），组件需要支持 `value` 和 `onChange` ；如果还需要支持校验规则，则组件还需实现 `tips` 和 `status` 两个 API，实现规则可参考 `Input` 组件。TS 类型：`ComponentType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+onEdited | Function | - | 编辑完成后，退出编辑模式时触发。TS 类型：`(context: { trigger: string; newRowData: T; rowIndex: number }) => void` | N
+props | Object | - | 透传给组件 `edit.component` 的属性。TS 类型：`{ [key: string]: any }` | N
+rules | Array | - | 校验规则。TS 类型：`FormRule[]`，[Form API Documents](./form?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
+
 ### TableTreeConfig
 
 名称 | 类型 | 默认值 | 说明 | 必传

src/date-picker/panel/date-range.tsx

@@ -282,10 +282,11 @@ export default Vue.extend<DateRangeData, DateRangeMethods, DateRangeComputed, Da
       this.$data[`${direction}Type`] = type;
     },
   },
+
   render() {
     const { leftType, rightType, firstDayOfWeek } = this;
     return (
-      <div class={`${prefix}-date-picker__panels`}>
+      <div class={`${prefix}-date-picker__panels`} onClick={(e: MouseEvent) => e.stopPropagation()}>
         <div class={`${prefix}-date-picker__panel`}>
           <t-date-header
             year={this.leftYear}

src/date-picker/panel/date.tsx

@@ -151,7 +151,8 @@ export default Vue.extend<DateData, DateMethods, DateComputed, DateProps>({
   },
   render() {
     return (
-      <div class={`${prefix}-date-picker__panel`}>
+      // 去除非必要的事件冒泡，方便外层处理相关交互。如：可编辑单元格的表格
+      <div class={`${prefix}-date-picker__panel`} onClick={(e: MouseEvent) => e.stopPropagation()}>
         <t-date-header
           year={this.year}
           month={this.month}