• Data Governance Dev's avatar
    feat(idcard-table): 大表分页显示 + 轮询不卡 · ee2976ed
    Data Governance Dev authored
    需求:大表(5000+ 行)一次渲染卡浏览器;轮询时整表重渲染卡顿
    
    改动(IdCardTable.vue):
    - 模板:truncateAt 截断提示 → el-pagination 分页器
      · pageSizes: [25, 50, 100, 250]
      · 仅 rows.length > pageSize 时显示(避免小表无意义 UI)
    - script:
      · currentPage = ref(1), pageSize = ref(25)
      · displayedRows 改成 pageSize 切片(替换 truncateAt 切片)
      · watch(props.rows) → currentPage 重置(防御性)
    - style: 分页器靠右
    
    轮询不卡的原理(三件套):
    1. IdCardTool.vue: renderedTableNames Set 去重 → 已存在表不重复 push
    2. violationsByTable.value.push(t) 只新增不替换 → 现有 IdCardTable 实例不动
    3. :rows="t.bad_rows" 是稳定 prop 引用 → Vue 不重渲染现有表格
    
    导出功能不变:仍导出 props.rows(不受分页影响)
    
    详细 work-log 见 work-logs/2026-08-17.md 主题 19
    ee2976ed
IdCardTable.vue 20.1 KB