搜索到
1
篇与
的结果
-
less循环生成n个样式类 在组件化项目开发中，有时候会遇到这种情况，三方组件不支持通过style属性来自定义样式，只能通过className 来指定class样式类名（如，ant 的 Table 组件），这时候就会有个问题，如果我们希望指定的是动态的高度或者宽度，且这个值是不固定的任意值，我们就无法知道应该指定哪个class名了。这里我采用了一个妥协方案，使用less的循环，事先生成n多个class，在使用的时候，动态匹配这些class中的对应值就行了，如下，使用less生成1-200的高度class。.generate-height(@n, @i: 1) when (@i =< @n) { .height-@{i} { // height: (@i * 100% / @n); height: 1px * @i; } .generate-height(@n, (@i + 1)); }生成的css内容如下：.height-1 { height: 1px; } .height-2 { height: 2px; } .height-3 { height: 3px; } .height-4 { height: 4px; } .height-5 { height: 5px; } .height-6 { height: 6px; } .height-7 { height: 7px; } .height-8 { height: 8px; } .height-9 { height: 9px; } .height-10 { height: 10px; } /*..此处省略11-198..*/ .height-198 { height: 198px; } .height-199 { height: 199px; } .height-200 { height: 200px; } 注意，height的单位最好放到变量前面使用方式：<Table size='small' tableLayout='fixed' loading={dataLoading} pagination={false} dataSource={dataList} style={{ width: '100%', border: borderInfo }} columns={tableColumns} // 读取变量设置class rowClassName={(record, index) => `height-${properties?.cellHeight}`} ></Table>
