uni-table首列固定问题

2,243 阅读1分钟

最近在使用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;
}

这样就可以了! 希望各位大佬多多指点!!小弟感激不尽!!