feat: support scroll-to-bottom

[novlan1]

🤔 这个 PR 的性质是？

• 日常 bug 修复
• 新特性提交
• 文档改进
• 演示代码改进
• 组件样式/交互改进
• CI/CD 改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他

🔗 相关 Issue

fix #1679

###相关 PRs

TDesignOteam/tdesign-api#824

💡 需求背景和解决方案

📝 更新日志

• feat(Table): 新增 footer 和 onScrollToBottom 属性

• 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• Changelog 已提供或无须提供

[novlan1]

<template>
  <t-table
    :data="data"
    :columns="columns"
    row-key="id"
    max-height="300"
    :scroll-bottom-threshold="80"
    @scroll-to-bottom="loadMore"
  >
    <template #footerSummary>
      <div class="scroll-load-footer">
        <template v-if="isLoading">
          <t-loading size="20px" />
          <span>正在加载...</span>
        </template>
        <template v-else-if="noMore">
          <span>没有更多了~</span>
        </template>
      </div>
    </template>
  </t-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const columns = [
  { colKey: 'id', title: '编号', width: 80 },
  { colKey: 'name', title: '姓名', width: 120 },
  { colKey: 'department', title: '部门' },
];

let nextId = 1;

const createRows = (count: number) => {
  const departments = ['技术部', '产品部', '设计部', '运营部', '市场部'];
  const names = ['张三', '李四', '王五', '赵六', '孙七', '周八'];
  const rows = [];
  for (let i = 0; i < count; i++) {
    rows.push({
      id: nextId,
      name: names[(nextId - 1) % names.length],
      department: departments[(nextId - 1) % departments.length],
    });
    nextId++;
  }
  return rows;
};

const data = ref(createRows(10));
const isLoading = ref(false);
const noMore = ref(false);

const loadMore = () => {
  if (isLoading.value || noMore.value) return;

  isLoading.value = true;

  // 模拟异步加载
  setTimeout(() => {
    const newRows = createRows(5);
    data.value = [...data.value, ...newRows];
    isLoading.value = false;

    // 模拟数据加载完毕
    if (data.value.length >= 30) {
      noMore.value = true;
    }
  }, 1500);
};
</script>

<style scoped>
.scroll-load-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  color: var(--td-text-color-placeholder, rgba(0, 0, 0, 0.35));
  font-size: 14px;
}
</style>

[pkg-pr-new]

• tdesign-mobile-vue-demo

  npm i https://pkg.pr.new/tdesign-mobile-vue@2169
  

commit: 1b3ca50

[github-actions]

[anlyyao]

@novlan1 辛苦大佬有空处理下冲突～

[novlan1]

@novlan1 辛苦大佬有空处理下冲突～

done

[novlan1]

/update-snapshot

[github-actions]

⏳ 正在运行快照更新。。。 CI: Open

[novlan1]

/update-snapshot

[github-actions]

⏳ 正在运行快照更新。。。 CI: Open