ruff-table表格渲染时,如果数据列不存在或者为空字符串,则会不显示这一列,造成渲染空白,这个特性可能是微信小程序view的渲染特性导致的,为了不显示错乱,把空字符串替换为一个“-“ 占位符,就能正常显示了。
找到Componet/ruff-table/ruff-table.wxml,打开
<view class="ruff-table-body">
<!-- 每行属性 -->
<view class="ruff-table-tr" wx:for="{{ list }}" wx:for-index="index" wx:for-item="row" wx:key="index" data-index="{{ index }}" bind:tap="onClick">
<!-- 每个表格属性 -->
<view class="ruff-table-td ruff-td-class" wx:for="{{ header }}" wx:for-index="idx" wx:for-item="header" wx:key="idx" style="width: {{ header.width }}rpx;{{header.style ? header.style : ''}}{{row[header.prop]<0?'color:red':''}}">
{{ row[header.prop]==' '?'-':row[header.prop] }}
</view>
</view>
</view>