Table 表尾吸底（含横向滚动条吸底）

examples/dialog/demos/attach.vue

@@ -90,7 +90,4 @@ export default Vue.extend({
   border-radius: 2px;
   overflow: hidden;
 }
-body {
-  width: 3000px;
-}
 </style>

examples/table/demos/affix.vue

@@ -0,0 +1,157 @@
+<template>
+  <!-- 注意组件父元素的宽度 -->
+  <div class="tdesign-demo-block-column-large tdesign-demo__table-affix" style="width: 100%">
+    <div>
+      <t-checkbox v-model="headerAffixedTop">表头吸顶</t-checkbox>
+      <t-checkbox v-model="footerAffixedBottom" style="margin-left: 32px">表尾吸底</t-checkbox>
+      <t-checkbox v-model="fixedLeftColumn" style="margin-left: 32px">固定左侧列</t-checkbox>
+      <t-checkbox v-model="fixedRightColumn" style="margin-left: 32px">固定右侧列</t-checkbox>
+    </div>
+    <t-table
+      rowKey="index"
+      :data="data"
+      :columns="columns"
+      :foot-data="footData"
+      :rowClassName="rowClassName"
+      :headerAffixedTop="headerAffixedTop"
+      :footerAffixedBottom="footerAffixedBottom"
+      :headerAffixProps="{ offsetTop: 87, zIndex: 1000 }"
+      :footerAffixProps="{ offsetBottom: 0, zIndex: 1000 }"
+      tableLayout="auto"
+      bordered
+      allowResizeColumnWidth
+    >
+      <template #t-foot-required> 插槽渲染表尾 </template>
+    </t-table>
+    <!-- <t-affix :offsetBottom="100">
+      <div>456</div>
+    </t-affix> -->
+    <!-- <div style="height: 200px;"></div> -->
+  </div>
+</template>
+<script lang="jsx">
+function getData(count) {
+  const data = [];
+  for (let i = 0; i < count; i++) {
+    data.push({
+      index: i,
+      platform: i % 2 === 0 ? '共有' : '私有',
+      type: ['String', 'Number', 'Array', 'Object'][i % 4],
+      default: ['-', '0', '[]', '{}'][i % 4],
+      detail: {
+        position: `读取 ${i} 个数据的嵌套信息值`,
+      },
+      required: i % 4 === 0 ? '是' : '否',
+      description: '数据源',
+    });
+  }
+  return data;
+}
+
+export default {
+  data() {
+    return {
+      data: getData(8),
+      // 如果在预渲染场景下，初次渲染的表格宽度和最终呈现宽度不一样，请异步设置表头吸顶
+      headerAffixedTop: true,
+      footerAffixedBottom: true,
+      fixedLeftColumn: true,
+      fixedRightColumn: true,
+      // 表尾有一行数据
+      footData: [{ type: '全部类型', description: '-' }],
+    };
+  },
+
+  computed: {
+    columns() {
+      return [
+        {
+          align: 'center',
+          className: 'row',
+          colKey: 'index',
+          title: '序号',
+          foot: () => <b style="color: rgb(0, 82, 217)">表尾</b>,
+          fixed: this.fixedLeftColumn ? 'left' : undefined,
+        },
+        {
+          colKey: 'platform',
+          title: '平台',
+          foot: (h, { rowIndex }) => <span>第 {rowIndex + 1} 行</span>,
+        },
+        {
+          colKey: 'type',
+          title: '类型',
+        },
+        {
+          colKey: 'expo',
+          title: '曝光',
+          cell: () => '-',
+          foot: '-',
+        },
+        {
+          colKey: 'click',
+          title: '点击',
+          cell: () => '-',
+          foot: '-',
+        },
+        {
+          colKey: 'ctr',
+          title: '点击率',
+          cell: () => '-',
+          foot: '-',
+        },
+        {
+          colKey: 'default',
+          title: '默认值',
+          foot: (h, { row }) => <span>{row.default || '空'}</span>,
+        },
+        {
+          colKey: 'required',
+          title: '是否必传',
+          // 使用插槽渲染，插槽名称为 't-foot-required'
+          foot: 't-foot-required',
+        },
+        {
+          colKey: 'detail.position',
+          title: '详情信息',
+          ellipsis: true,
+          foot: () => <div>渲染函数输出表尾信息</div>,
+        },
+        {
+          colKey: 'operation',
+          title: '操作',
+          cell: () => '查看',
+          width: 80,
+          foot: '-',
+          fixed: this.fixedRightColumn ? 'right' : undefined,
+        },
+      ];
+    },
+  },
+
+  methods: {
+    // type 可选值：foot 和 body
+    rowClassName({ type }) {
+      if (type === 'foot') return 't-tdesign__custom-footer-tr';
+      return 't-tdesign__custom-body-tr';
+    },
+    getContainer() {
+      return document.body;
+    },
+  },
+};
+</script>
+
+<style>
+/*
+ * table-layout: auto 模式下，table 元素的宽度设置很重要很重要。
+ * 如果不设置，列多了之后会挤在一起
+ * **/
+.tdesign-demo__table-affix table {
+  width: 1000px;
+}
+
+.tdesign-demo__table-affix .t-table {
+  max-width: 800px;
+}
+</style>

examples/table/demos/fixed-header-col.vue

@@ -8,7 +8,12 @@
       </t-radio-group>
     </div>
 
-    <div><t-checkbox v-model="fixedTopAndBottomRows">是否冻结首尾两行</t-checkbox></div>
+    <div>
+      <t-checkbox v-model="fixedTopAndBottomRows">是否冻结首尾两行</t-checkbox>
+      <t-checkbox v-model="stripe">是否显示斑马纹</t-checkbox>
+      <!-- TODO：虚拟滚动开启与关闭支持动态响应 -->
+      <!-- <t-checkbox v-model="virtualScroll">开启虚拟滚动</t-checkbox> -->
+    </div>
 
     <!-- 如果希望表格列宽自适应，设置 `table-layout: auto` 即可。需同时设置 table-content-width -->
     <!-- fixedRows: [2, 2] 表示冻结表格的头两行和尾两行 -->
@@ -22,7 +27,10 @@
       :table-content-width="tableLayout === 'fixed' ? undefined : '1600px'"
       :max-height="fixedTopAndBottomRows ? 500 : 300"
       :fixedRows="fixedTopAndBottomRows ? [2, 2] : undefined"
+      :scroll="virtualScroll ? { type: 'virtual' } : undefined"
+      :stripe="stripe"
       bordered
+      allowResizeColumnWidth
     >
       <template #operation="slotProps">
         <a class="link" @click="rehandleClickOp(slotProps)">删除</a>
@@ -31,27 +39,33 @@
   </div>
 </template>
 <script>
-const data = [];
-for (let i = 0; i < 20; i++) {
-  data.push({
-    index: i,
-    platform: i % 2 === 0 ? '共有' : '私有',
-    type: ['String', 'Number', 'Array', 'Object'][i % 4],
-    default: ['-', '0', '[]', '{}'][i % 4],
-    detail: {
-      position: `读取 ${i} 个数据的嵌套信息值`,
-      position1: `读取 ${i} 个数据的嵌套信息值`,
-    },
-    description: '数据源',
-    needed: i % 4 === 0 ? '是' : '否',
-  });
+function getData(count) {
+  const data = [];
+  for (let i = 0; i < count; i++) {
+    data.push({
+      index: i,
+      platform: i % 2 === 0 ? '共有' : '私有',
+      type: ['String', 'Number', 'Array', 'Object'][i % 4],
+      default: ['-', '0', '[]', '{}'][i % 4],
+      detail: {
+        position: `读取 ${i} 个数据的嵌套信息值`,
+        position1: `读取 ${i} 个数据的嵌套信息值`,
+      },
+      description: '数据源',
+      needed: i % 4 === 0 ? '是' : '否',
+    });
+  }
+  return data;
 }
+
 export default {
   data() {
     return {
+      virtualScroll: false,
       fixedTopAndBottomRows: false,
+      stripe: false,
       tableLayout: 'fixed',
-      data,
+      data: getData(14),
       columns: [
         {
           align: 'center',
@@ -107,6 +121,11 @@ export default {
       ],
     };
   },
+  watch: {
+    virtualScroll(val) {
+      this.data = val ? getData(2000) : getData(15);
+    },
+  },
   methods: {
     rehandleClickOp({ text, row }) {
       console.log(text, row);

examples/table/demos/multi-header.vue

@@ -15,7 +15,7 @@
 
     <!-- tableContentWidth 必须大于表格的外层宽度，否则请设置 width: 100% -->
     <!-- 多级表头中，如果要使用固定列功能，则必须设置 colKey 和 fixed -->
-    <!-- :scroll="{ type: 'virtual' }" -->
+    <!-- :scroll="{ type: 'virtual' }" 表示虚拟滚动 -->
     <t-table
       row-key="index"
       :data="data"

examples/table/table.md

@@ -5,6 +5,7 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+allowResizeColumnWidth | Boolean | false | 是否允许调整列宽 | N
 bordered | Boolean | false | 是否显示表格边框 | N
 bottomContent | String / Slot / Function | - | 表格底部内容，可以用于自定义列设置等。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 columns | Array | [] | 列配置，泛型 T 指表格数据类型。TS 类型：`Array<BaseTableCol<T>>` | N
@@ -14,6 +15,8 @@ empty | String / Slot / Function | '' | 空表格呈现样式，支持全局配
 firstFullRow | String / Slot / Function | - | 首行内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 fixedRows | Array | - | 固定行（冻结行），示例：[M, N]，表示冻结表头 M 行和表尾 N 行。M 和 N 值为 0 时，表示不冻结行。TS 类型：`Array<number>` | N
 footData | Array | [] | 表尾数据源，泛型 T 指表格数据类型。TS 类型：`Array<T>` | N
+footerAffixedBottom | Boolean | false | 表尾吸底 | N
+footerAffixProps | Object | - | 表尾吸底基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`AffixProps` | N
 headerAffixedTop | Boolean | false | 表头吸顶 | N
 headerAffixProps | Object | - | 表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性。TS 类型：`AffixProps`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 height | String / Number | - | 表格高度，超出后会出现滚动条。示例：100,  '30%',  '300'。值为数字类型，会自动加上单位 px。如果不是绝对固定表格高度，建议使用 `maxHeight` | N

src/table/README.md

@@ -17,7 +17,7 @@
 - hooks/useColumnController 自定义列配置，PrimaryTable
 - hooks/useColumnResize 列宽可拖动，BaseTable
 - hooks/useFilter 过滤/筛选，PrimaryTable
-- hooks/useFixed 固定表头/固定列/固定行，BaseTable
+- hooks/useFixed 固定表头/固定列/固定行，表头吸顶，表尾吸顶，BaseTable
 - hooks/useMultiHeader 多级表头，BaseTable
 - hooks/usePagination 分页，BaseTable
 - hooks/useRowExpand 展开/收起行，PrimaryTable

src/table/base-table-props.ts

@@ -8,6 +8,8 @@ import { TdBaseTableProps } from '../table/type';
 import { PropType } from 'vue';
 
 export default {
+  /** 是否允许调整列宽 */
+  allowResizeColumnWidth: Boolean,
   /** 是否显示表格边框 */
   bordered: Boolean,
   /** 表格底部内容，可以用于自定义列设置等 */
@@ -44,6 +46,12 @@ export default {
     type: Array as PropType<TdBaseTableProps['footData']>,
     default: (): TdBaseTableProps['footData'] => [],
   },
+  /** 表尾吸底 */
+  footerAffixedBottom: Boolean,
+  /** 表尾吸底基于 Affix 组件开发，透传全部 Affix 组件属性 */
+  footerAffixProps: {
+    type: Object as PropType<TdBaseTableProps['footerAffixProps']>,
+  },
   /** 表头吸顶 */
   headerAffixedTop: Boolean,
   /** 表头吸顶基于 Affix 组件开发，透传全部 Affix 组件属性 */
@@ -73,7 +81,7 @@ export default {
   maxHeight: {
     type: [String, Number] as PropType<TdBaseTableProps['maxHeight']>,
   },
-  /** 分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true`。 */
+  /** 分页配置，值为空则不显示。具体 API 参考分页组件。当 `data` 数据长度超过分页大小时，会自动对本地数据 `data` 进行排序，如果不希望对于 `data` 进行排序，可以设置 `disableDataPage = true` */
   pagination: {
     type: Object as PropType<TdBaseTableProps['pagination']>,
   },