[Table] some features (#935)

* feat(table): some features * docs(table): update comments * feat(table): code improve * test(unit): update snapshots
Tencent · Jun 5, 2022 · b0fd232 · b0fd232
1 parent 298a555
commit b0fd232
Show file tree

Hide file tree

Showing 17 changed files with 136 additions and 69 deletions.
diff --git a/examples/table/demos/base.vue b/examples/table/demos/base.vue
@@ -28,6 +28,7 @@
     />
   </div>
 </template>
+
 <script setup lang="jsx">
 import { ref } from 'vue';
 

diff --git a/examples/table/demos/drag-col-sort.vue b/examples/table/demos/drag-col-sort.vue
@@ -44,10 +44,11 @@ const data = ref(initialData);
 
 const columns = ref(initialColumns);
 
-const onDragSort = ({ currentIndex, targetIndex, current, target, currentData, e, sort }) => {
-  console.log('交换行', currentIndex, targetIndex, current, target, currentData, e, sort);
+// currentData is going to be deprecated
+const onDragSort = ({ currentIndex, targetIndex, current, target, data, newData, e, sort }) => {
+  console.log('交换行', currentIndex, targetIndex, current, target, data, newData, e, sort);
   if (sort === 'col') {
-    columns.value = currentData;
+    columns.value = newData;
   }
 };
 </script>
diff --git a/examples/table/demos/drag-sort-handler.vue b/examples/table/demos/drag-sort-handler.vue
@@ -80,8 +80,9 @@ const resetData = () => {
   data.value = [];
 };
 
-const onDragSort = ({ currentIndex, targetIndex, current, target, currentData, e }) => {
-  console.log('交换行', currentIndex, targetIndex, current, target, currentData, e);
-  data.value = currentData;
+// currentData is going to be deprecated
+const onDragSort = ({ currentIndex, targetIndex, current, target, data, newData, e }) => {
+  console.log('交换行', currentIndex, targetIndex, current, target, data, newData, e);
+  data.value = newData;
 };
 </script>
diff --git a/examples/table/demos/drag-sort.vue b/examples/table/demos/drag-sort.vue
@@ -42,8 +42,9 @@ const initialData = new Array(4).fill(5).map((_, i) => ({
 
 const data = ref(initialData);
 
-const onDragSort = ({ currentIndex, targetIndex, current, target, currentData, e }) => {
-  console.log('交换行', currentIndex, targetIndex, current, target, currentData, e);
-  data.value = currentData;
+// currentData is going to be deprecated
+const onDragSort = ({ currentIndex, targetIndex, current, target, data, newData, e }) => {
+  console.log('交换行', currentIndex, targetIndex, current, target, data, newData, e);
+  data.value = newData;
 };
 </script>
diff --git a/examples/table/demos/editable-cell.vue b/examples/table/demos/editable-cell.vue
@@ -42,6 +42,8 @@ const columns = computed(() => [
         clearable: true,
         autofocus: true,
       },
+      // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
+      abortEditOnEvent: ['onEnter'],
       // 编辑完成，退出编辑态后触发
       onEdited: (context) => {
         data.value.splice(context.rowIndex, 1, context.newRowData);

diff --git a/examples/table/demos/filter-controlled.vue b/examples/table/demos/filter-controlled.vue
@@ -13,7 +13,7 @@
       <t-checkbox v-model="bordered">是否显示表格边框</t-checkbox>
     </div>
 
-    <!-- 1. 此处代码有效，勿删！支持语法糖 filter-value.sync ， 支持非受控属性 defaultfilterValue -->
+    <!-- 1. 此处代码有效，勿删！支持语法糖 filter-value.sync ， 支持非受控属性 defaultFilterValue -->
     <!-- 2. 其中，filterIcon 用于自定义筛选图标，支持渲染函数 props.filterIcon，支持插槽 filterIcon。 -->
     <!-- 3. filterRow={() => null}，则不会显示过滤行 -->
     <!-- <t-table
@@ -26,8 +26,9 @@
       <template #filterRow>自定义过滤行信息</template>
     </t-table> -->
 
-    <!-- filter-value.sync 等同于 filter-value + filter-change -->
-    <!-- :filter-row="() => null" 用于隐藏过滤结果行 -->
+    <!-- 1. v-model:filter-value 等同于 filter-value + filter-change -->
+    <!-- 2. :filter-row="() => null" 用于隐藏过滤结果行 -->
+    <!-- 3. <template #filterRow><p>这是自定义的过滤结果行</p></template> ，可使用插槽完全自定义结果行内容-->
     <t-table
       row-key="key"
       :columns="columns"
@@ -41,6 +42,7 @@
 
 <script setup lang="jsx">
 import { ref, computed } from 'vue';
+import { DatePicker } from 'tdesign-vue-next';
 
 const initData = new Array(5).fill(null).map((_, i) => ({
   key: String(i + 1),
@@ -79,6 +81,7 @@ const columns = computed(() => [
     // 多选过滤配置
     filter: {
       type: 'multiple',
+      resetValue: [],
       list: [
         { label: 'All', checkAll: true },
         { label: 'Skures', value: 'Skures' },
@@ -94,6 +97,9 @@ const columns = computed(() => [
     // 输入框过滤配置
     filter: {
       type: 'input',
+      resetValue: '',
+      // 按下 Enter 键时也触发确认搜索
+      confirmEvents: ['onEnter'],
       props: { placeholder: '输入关键词过滤' },
       // 是否显示重置取消按钮，一般情况不需要显示
       showConfirmAndReset: true,
@@ -107,7 +113,12 @@ const columns = computed(() => [
     // 自定义过滤组件：日期过滤配置，请确保自定义组件包含 value 和 onChange 属性
     filter: {
       type: 'custom',
-      component: () => <t-date-picker clearable />,
+      // this config is not recommended
+      // component: () => <t-date-picker clearable />,
+      component: DatePicker,
+      props: {
+        clearable: true,
+      },
     },
   },
 ]);

diff --git a/examples/table/demos/tree.vue b/examples/table/demos/tree.vue
@@ -27,7 +27,7 @@
       drag-sort="row-handler"
       :data="data"
       :columns="columns"
-      :tree="{ childrenKey: 'list', treeNodeColumnIndex: 2 }"
+      :tree="{ childrenKey: 'list', treeNodeColumnIndex: 2, indent: 50 }"
       :tree-expand-and-fold-icon="customTreeExpandAndFoldIcon ? treeExpandAndFoldIconRender : undefined"
       :pagination="pagination"
       :before-drag-sort="beforeDragSort"