<template>
|
<view class="table-h5-footer top-header-uni" :style="{paddingRight:`${scrollbarSize}px`}">
|
<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:'100'}px`,
|
flex:index===transColumns.length-1?1:'none',
|
minWidth:`${item.width?item.width:'100'}px`,
|
borderRight:`${border?'1px solid #e8e8e8':''}`,
|
borderTop:`${border?'1px 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: 8px;
|
line-height: 39px;
|
height: 40px;
|
//display: flex;
|
//align-items: center;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
width: 100px;
|
padding-right: 20px;
|
word-break: keep-all;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
overflow-wrap: break-word;
|
border-bottom: 1px solid #e8e8e8;
|
}
|
|
}
|
</style>
|
