Commit 8028086b authored by leon's avatar leon

feat:table add sticky

parent 92c58a54
......@@ -3,11 +3,11 @@
<NormalTitle :elementInfo="elementInfo"></NormalTitle>
<scroll-view scroll-x scroll-y class="scroll-view_H" :style="[tableConfigStyle]">
<view class="table">
<view class="tr table_header" v-if="elementInfo.table.tableHeader.showHeader">
<view class= 'tr' :class="[sticky ? 'table_header_sticky' : 'table_header']" v-if="elementInfo.table.tableHeader.showHeader">
<template v-for="(item, index) in elementInfo.table.column">
<view
class="th th_style"
:class="[index == 0 ? 'row_fixed': '']"
:class="[index == 0 && !sticky ? 'row_fixed': '']"
:key="index"
>{{item.title}}</view>
</template>
......@@ -62,7 +62,8 @@
left: 'start',
center: 'center',
right: 'flex-end'
}
},
sticky: false
};
},
computed: {
......@@ -91,6 +92,14 @@
}
},
},
mounted() {
uni.$on(this.elementInfo.id, ({sticky}) => {
this.sticky = sticky
})
},
destroy() {
uni.$off(elementInfo.id)
},
methods: {
initChart() {
const that = this
......@@ -172,6 +181,11 @@
top: 0;
z-index: 2;
}
.table_header_sticky {
position: fixed;
top: 0;
z-index: 2;
}
.row_fixed {
position: sticky;
left: 0;
......
......@@ -68,7 +68,8 @@
return {
reportInfo: {},
timename: null,
pageScrollTop: 0
pageScrollTop: 0,
stickyTables: [] // 设置了吸顶的table
}
},
computed: {
......@@ -215,12 +216,8 @@
}, parseInt(info.dataPollingInterval) * 1000)
}
}
res.data.Result.list.forEach(item => {
if(item.type === 'DateTimePicker' && item.option.dateTime.showTime) {
item.option.dateTime.date = this.dateTimeFormat(item.option.dateTime.date)
}
})
that.reportInfo = res.data.Result
that.getStickyTables()
}
},
/**
......@@ -256,12 +253,41 @@
return item
})
}
}
},
getStickyTables() {
this.reportInfo.list.forEach(item=> {
// 后端会增加一个表头吸顶的配置,headerSticky=true
if(item.type === 'NormalTable' && item.table.tableHeader.headerSticky) {
this.stickyTables.push(item)
}
})
},
},
onPullDownRefresh() {
this.getReportCharts()
},
onPageScroll(res) {
if(res.scrollTop > this.pageScrollTop) {
// 向上滑动
this.stickyTables.forEach(item=> {
if(res.scrollTop >= item.top * this.scale) {
uni.$emit(item.id,{sticky: true})
}
if(res.scrollTop >= item.top * this.scale + item.height * this.scale) {
uni.$emit(item.id,{sticky: false})
}
})
} else {
this.stickyTables.forEach(item=> {
if(res.scrollTop < item.top * this.scale + item.height * this.scale) {
uni.$emit(item.id,{sticky: true})
}
if(res.scrollTop < item.top * this.scale) {
uni.$emit(item.id,{sticky: false})
}
})
}
this.pageScrollTop = res.scrollTop
},
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment