知识

提取组件前 <template> <view class="container"> <view class="table-wrap"> <view class="table-content"> <view class="tr header-row"> <view v-for="(col, index) in columns" :key="index" class="th" :class="{ 'fixed-col': col.fixed, 'stretch-col': index === columns.length - 1 && !col.fixed }" :style="{ width: col.width, left: col.fixed ? '0' : 'auto' }" > {{ col.label }} </view> </view> <view class="tr body-row" v-for="(row, rowIndex) in tableData" :key="rowIndex"> <view v-for="(col, colIndex) in columns" :key="colIndex" class="td" :class="{ 'fixed-col': col.fixed, 'stretch-col': colIndex === columns.length - 1 && !col.fixed }" :style="{ width: col.width, left: col.fixed ? '0' : 'auto' }" > {{ row[col.prop] }} </view> </view> </view> </view> </view> </template> <script> export default { data() { return { columns: [ { label: '编号', prop: 'id', width: '150rpx', fixed: true }, { label: '姓名', prop: 'name', width: '200rpx' }, { label: '年龄', prop: 'age', width: '150rpx' }, { label: '部门', prop: 'dept', width: '200rpx' }, { label: '职位', prop: 'job', width: '200rpx' }, { label: '入职时间', prop: 'date', width: '260rpx' }, { label: '备注信息', prop: 'remark', width: '400rpx' } ], tableData: [] }; }, mounted() { this.loadData(); }, methods: { loadData() { const list = []; for (let i = 1; i <= 20; i++) { list.push({ id: `100${i}`, name: `测试用户${i}`, age: 20 + i, dept: '研发中心', job: '前端工程师', date: '2023-11-01', remark: i % 3 === 0 ? '这是一个非常长非常长非常长非常长非常长非常长非常长的备注文本，用于测试单元格的自动换行功能和固定列的自动撑高对齐效果。' : '测试文本较短。' }); } this.tableData = list; } } }; </script> <style scoped> .container { height: 100vh; background-color: #fff; display: flex; flex-direction: column; } .table-wrap { flex: 1; height: 0; overflow: auto; position: relative; } .table-content { display: inline-block; min-width: 100%; } .tr { display: flex; width: 100%; white-space: normal; align-items: stretch; } .th, .td { display: flex; align-items: center; justify-content: flex-start; text-align: left; box-sizing: border-box; padding: 10rpx; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; flex-shrink: 0; font-size: 28rpx; background-color: #fff; line-height: 1.4; } .stretch-col { flex-grow: 1; width: 0 !important; min-width: 150rpx; } .header-row { position: sticky; top: 0; z-index: 10; height: 80rpx; background-color: #dcdfe6; } .th { background-color: #ebeef5; font-weight: bold; color: #606266; border-bottom: 1px solid #ebeef5; height: 100%; } .fixed-col { position: sticky; left: 0; z-index: 5; border-right: 1px solid #dcdfe6; } .header-row .fixed-col { z-index: 20; } .body-row:hover .td { background-color: #f5f7fa; } </style> 提取组件 <template> <view class="container"> <view class="table-wrap"> <view class="table-content"> <view class="tr header-row"> <view v-for="(col, index) in columns" :key="index" class="th" :class="{ 'fixed-col': col.fixed, 'stretch-col': index === columns.length - 1 && !col.fixed }" :style="{ width: col.width, left: col.fixed ? '0' : 'auto' }" > {{ col.label }} </view> </view> <view class="tr body-row" v-for="(row, rowIndex) in tableData" :key="rowIndex"> <view v-for="(col, colIndex) in columns" :key="colIndex" class="td" :class="{ 'fixed-col': col.fixed, 'stretch-col': colIndex === columns.length - 1 && !col.fixed }" :style="{ width: col.width, left: col.fixed ? '0' : 'auto' }" > {{ row[col.prop] }} </view> </view> </view> </view> </view> </template> <script> export default { props: { /** * label:列名称, * prop: 对应 tableData 中数据的键名 (key)，用于内容映射 * width: 宽度 * fixed: 是否将该列固定在左侧。目前组件仅支持固定最左侧的第一列。 */ columns: { type: Array, required: true, default: () => [] }, tableData: { type: Array, required: true, default: () => [] } } }; </script> <style scoped> .container { height: 100%; background-color: #fff; display: flex; flex-direction: column; } .table-wrap { flex: 1; height: 0; overflow: auto; position: relative; } .table-content { display: inline-block; min-width: 100%; } .tr { display: flex; width: 100%; white-space: normal; align-items: stretch; } .th, .td { display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; padding: 10rpx; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; flex-shrink: 0; font-size: 28rpx; background-color: #fff; line-height: 1.4; } .stretch-col { flex-grow: 1; min-width: 150rpx; } .header-row { position: sticky; top: 0; z-index: 10; height: 80rpx; } .th { background-color: #ebeef5; font-weight: bold; color: #606266; border-bottom: 1px solid #ebeef5; height: 100%; } .fixed-col { position: sticky; left: 0; z-index: 5; border-right: 1px solid #dcdfe6; } .header-row .fixed-col { z-index: 20; } .body-row:hover .td { background-color: #f5f7fa; } </style>

微信小程序-分包 分包后-分包内的JS文件还是会被打包入主包的vendor.js,导致超出2M限制 项目根目录创建vue.config.js module.exports = { configureWebpack: { optimization: { splitChunks: { cacheGroups: { subPackageA: { name: 'subPackageName/vendor', test: /[\\/]node_modules[\\/](library-name)[\\/]/, chunks: 'all', priority: 10, enforce: true } } } } } }; manifest.json 增加配置 "mp-weixin" : { "optimization" : { "subPackages" : true } },

求和符号 ($\sum$) 的含义 这个公式片段的完整形式通常是这样的： $$ \sum_{i=1}^{N} f(i) $$ 符号 含义 $\sum$ (Sigma) 求和符号。表示将一系列数值加起来（累加）。 $i=1$ 起始索引。表示求和从 $i$ 等于 1 开始。 $N$ 结束索引。表示求和到 $i$ 等于 $N$ 结束。 $f(i)$ 求和项。表示每次累加的具体数值或表达式。 用通俗的话来说，它的意思是： “将 $f(i)$ 这个表达式，从 $i=1$ 开始，一直算到 $i=N$ 结束，然后把所有结果加起来。” 示例 如果 $N=4$，且求和项是 $f(i) = i^2$，那么公式的展开式就是： $$ \sum_{i=1}^{4} i^2 = 1^2 + 2^2 + 3^2 + 4^2 = 1 + 4 + 9 + 16 = 30 $$