• Data Governance Dev's avatar
    feat(web3): ResultTable 列宽可拖拽(参照 web2 el-table resizable) · f33c4901
    Data Governance Dev authored
    web3 ResultTable 是自定义 table,el-table resizable 不能直接复用,自实现:
    
    1. ResultTable.vue
    
       columnWidths reactive + startResize/onResizeMove/endResize
    
       拖拽状态不放 reactive(频繁写不触发响应式刷新整张表格)
    
       window mousemove/mouseup(用户拖快会脱出 th 丢失 mouseup)
    
       拖拽过程 document.body user-select=none + cursor col-resize
    
       onBeforeUnmount 清理监听 + 还原 body 样式
    
    2. global.css
    
       .resize-handle 样式(透明 + hover 变蓝 409eff)
    
       table.dq-table 加 table-layout: fixed(auto 时 width 被无视)
    
       thead th 加 position: relative 让 handle absolute 定位
    
    3. 踩坑:改 Vue setup 的 import 段要核对所有 export 符号
    
       我改 import 时删了 watch 符号,但 setup 里 line 248 的 watch() 还在用
    
       → 运行时 ReferenceError: watch is not defined 把页面打白
    
    4. localStorage 列宽持久化没做(用户没要求;后续可加 key→width 存)
    f33c4901
ResultTable.vue 12.6 KB