property/property_ui/manage/components/zb-table/components/table-h5-summary.vue

<template>
  <view class="table-h5-footer top-header-uni" :style="{paddingRight:`${scrollbarSize}rpx`}">
    <scroll-view class="zb-table-headers"
                 @scroll="handleFooterTableScrollLeft"
                 scroll-x="true"
                 scroll-y="false"
                 id="tableFooterHeaders"
                 scroll-anchoring="true"
                 :scroll-left="headerFooterTableLeft"
                 style="padding-bottom: 0px;
						background: #fafafa;height: 100%">
      <view class="zb-table-fixed" >
        <view class="zb-table-thead" style="position: relative;" >
          <view class="item-tr">
            <view
                class="item-th"
                :style="{
	                              width:`${item.width?item.width:'200'}rpx`,
															  flex:index===transColumns.length-1?1:'none',
															  minWidth:`${item.width?item.width:'200'}rpx`,
															  borderRight:`${border?'2rpx solid #e8e8e8':''}`,
															  borderTop:`${border?'2rpx solid #e8e8e8':''}`,
															  textAlign:item.align||'left'
														  }"
                v-for="(item,index) in transColumns" :key="index">
              {{ sums[index] }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
import summary from '../js/summary.js'
export default {
  name:'table-footer',
  mixins:[summary],
}
</script>
<style lang="scss" scoped>
.table-h5-footer {
  background: #fafafa;
  /*每个页面公共css */
  scroll-view ::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }
  //第二种
  ::-webkit-scrollbar{
    display: none;
  }
  .item-tr{
    display: flex;
  }
  .item-th{
    padding-left: 8rpx;
    line-height: 78rpx;
    height: 80rpx;
    //display: flex;
    //align-items: center;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 200rpx;
    padding-right: 8rpx;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    border-bottom: 2rpx solid #e8e8e8;
  }

}
</style>