微信小程序自定义表格组件封装示例 - 固定表头和首列，支持横向滑动

// table.wxml {{headerData.firstCell}} {{item}} 操作 {{item.firstCell}} {{item[index]}}

// table.js Component({ properties: { headerData: { type: Object, value: {}, }, rowData: { type: Array, value: [], }, },

methods: { handleBtnClick(e) { const { btnData } = e.detail; // 触发按钮点击事件，传递参数 this.triggerEvent('btn-click', btnData); } } })

// table.wxss .table-container { width: 100%; white-space: nowrap; overflow-x: scroll; }

.header-row, .row { display: flex; align-items: center; height: 50px; }

.header-cell, .cell { flex: 1; text-align: center; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; }

.first-cell, .last-cell { flex-basis: 100px; }

.last-cell { display: flex; align-items: center; justify-content: center; }