最近在使用uiapp 做一个移动端,发现uni-table这个组件 并没有固定左侧列的功能 因为需要自定义几列的内容 其他在插件市场的table组件又不支持自定义没有slot 可以用 所以只能自己写一下这个固定列
<view class="table-container">
<uni-table :stripe="false" emptyText="暂无更多数据" sticky>
<uni-tr>
<uni-th class="fixed" width="140" align="center">--</uni-th>
<uni-th align="center" width="100">--</uni-th>
<uni-th align="center" width="100">--(--)</uni-th>
<uni-th align="center" width="100">--</uni-th>
<uni-th align="center" width="210">--:{{--}}</uni-th>
<uni-th align="center" width="210" >--:{{--}}</uni-th>
<uni-tr v-for="(it, i) in tableList" :key="id">
<uni-td width="130" align="center" class="fixed">{{it.plantName}}</uni-td>
<uni-td align="center">{{it.capacity}}</uni-td>
<uni-td align="center">{{it.load}}</uni-td>
<uni-td align="center" >
<view class="" style="display: flex; justify-content: center; align-items: center;">
<view class="item-grey">
<view class="item-green" :style="{width: it.rate + '%'}"></view>
</view>
<view class="">{{it.rate || it.rate == 0 ? it.rate + '%' : '--'}}</view>
</view>
</uni-td>
</uni-tr>
</uni-table>
</view>
这是我表格的基本结构我给th 跟td 都添加了一个fixed 的类名 用于标识第一列 然后如果是循环生成的th 或 td 话 可以通过index 或者 别的唯一标识去判定一下 然后 把样式如下
.table-container {
overflow-x: auto;
}
.table-container .uni-table-body-wrapper {
position: relative;
}
.table-container .uni-table-body {
display: flex;
}
.fixed {
position: sticky;
left: 0;
z-index: 1;
background-color: #ffffff;
}
这样就可以了! 希望各位大佬多多指点!!小弟感激不尽!!