feat(table): [Table] Footer Merge Cells Support; <col min-width> supp…

…ort (#1217) * feat(table): footer-summary slot support for full footer row * feat(table): footer merge cells support * fix(table): do not render tfoot withour neither of footData and footerSummary * feat(table): min-width of col support * feat(table): add footerSummary to props * test(table): update snapshots * fix(table): log error
Tencent · Aug 2, 2022 · 4e79397 · 4e79397
1 parent 7806708
commit 4e79397
Show file tree

Hide file tree

Showing 17 changed files with 456 additions and 199 deletions.
diff --git a/examples/table/demos/affix.vue b/examples/table/demos/affix.vue
@@ -133,7 +133,7 @@ export default {
       horizontalScrollAffixedBottom: false,
       paginationAffixedBottom: false,
       // 表尾有一行数据
-      footData: [{ type: '全部类型', description: '-' }],
+      footData: [{ index: 'footer-row-1', type: '全部类型', description: '-' }],
       columns: [],
     };
   },

diff --git a/examples/table/demos/custom-footer.vue b/examples/table/demos/custom-footer.vue
@@ -1,8 +1,29 @@
 <template>
   <div class="tdesign-demo-block-column-large">
-    <!-- rowClassName="tdesign-demo__row-custom-name" -->
-    <t-table rowKey="index" :data="data" :columns="columns" :foot-data="footData" :rowClassName="rowClassName">
-      <template #t-foot-required> 插槽渲染表尾 </template>
+    <div>
+      <!-- 表尾有 3 种方式 -->
+      <t-radio-group v-model="footerType" variant="default-filled">
+        <t-radio-button value="normal">普通表尾</t-radio-button>
+        <t-radio-button value="full">通栏表尾</t-radio-button>
+        <t-radio-button value="custom">自定义表尾合并列</t-radio-button>
+      </t-radio-group>
+    </div>
+    <!-- footData 之所以是数组，是为了支持多行表尾数据 -->
+    <t-table
+      rowKey="index"
+      bordered
+      :data="data"
+      :columns="columns"
+      :foot-data="['normal', 'custom'].includes(footerType) ? footData : []"
+      :rowClassName="rowClassName"
+      :rowspanAndColspanInFooter="footerType === 'custom' ? rowspanAndColspanInFooter : undefined"
+    >
+      <!-- 如果是通栏表尾，只需设置 footer-summary，支持同名 Props 属性 footerSummary -->
+      <!-- 通栏表尾和普通表尾，允许同时存在 -->
+      <template #footer-summary>
+        <div class="t-table__row-filter-inner" v-if="footerType === 'full'">通栏总结行信息</div>
+      </template>
+      <template #t-foot-required> <b>必传(插槽)</b> </template>
     </t-table>
   </div>
 </template>
@@ -25,8 +46,16 @@ export default {
   data() {
     return {
       data,
+      footerType: 'normal',
       // 表尾有一行数据
-      footData: [{ type: '全部类型', description: '-' }],
+      footData: [
+        {
+          index: '123',
+          type: '全部类型',
+          default: '',
+          description: '-',
+        },
+      ],
       columns: [
         {
           align: 'center',
@@ -40,7 +69,7 @@ export default {
           width: 100,
           colKey: 'platform',
           title: '平台',
-          foot: (h, { rowIndex }) => <span>第 {rowIndex + 1} 行</span>,
+          foot: (h, { rowIndex }) => <div style="width: 100%; text-align: center">第 {rowIndex + 1} 行</div>,
         },
         {
           colKey: 'type',
@@ -75,6 +104,12 @@ export default {
       if (type === 'foot') return 't-tdesign__custom-footer-tr';
       return 't-tdesign__custom-body-tr';
     },
+
+    rowspanAndColspanInFooter({ rowIndex, colIndex }) {
+      // 中间列合并，收尾两列不合并
+      if (rowIndex === 0 && colIndex === 1) return { colspan: this.columns.length - 2 };
+      return {};
+    },
   },
 };
 </script>
diff --git a/examples/table/demos/loading.vue b/examples/table/demos/loading.vue
@@ -28,7 +28,6 @@ export default {
         {
           align: 'left',
           width: '100',
-          minWidth: '100',
           className: 'row',
           ellipsis: true,
           colKey: 'type',
@@ -37,7 +36,6 @@ export default {
         {
           align: 'left',
           width: '100',
-          minWidth: '100',
           className: 'test',
           ellipsis: true,
           colKey: 'platform',
@@ -46,7 +44,6 @@ export default {
         {
           align: 'left',
           width: '100',
-          minWidth: '100',
           className: 'test2',
           ellipsis: true,
           colKey: 'property',
@@ -55,7 +52,6 @@ export default {
         {
           align: 'left',
           width: '100',
-          minWidth: '100',
           className: 'test4',
           ellipsis: true,
           colKey: 'default',
@@ -64,7 +60,6 @@ export default {
         {
           align: 'left',
           width: '100',
-          minWidth: '100',
           className: 'test3',
           ellipsis: true,
           colKey: 'needed',
@@ -73,7 +68,6 @@ export default {
         {
           align: 'left',
           width: '100',
-          minWidth: '100',
           className: 'row',
           ellipsis: true,
           colKey: 'description',

diff --git a/examples/table/demos/merge-cells.vue b/examples/table/demos/merge-cells.vue
@@ -28,39 +28,34 @@ export default {
         {
           align: 'left',
           width: '100',
-          minWidth: '100',
           className: 'test',
           colKey: 'platform',
           title: '平台',
         },
         {
           align: 'left',
           width: '100',
-          minWidth: '100',
           className: 'row',
           colKey: 'type',
           title: '类型',
         },
         {
           align: 'left',
           width: '100',
-          minWidth: '100',
           className: 'test4',
           colKey: 'default',
           title: '默认值',
         },
         {
           align: 'left',
           width: '100',
-          minWidth: '100',
           className: 'test3',
           colKey: 'needed',
           title: '是否必传',
         },
         {
           align: 'left',
           width: '100',
-          minWidth: '100',
           className: 'row',
           colKey: 'description',
           title: '说明',