VUE +element ui 表格实现数据轮播滚动效果
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
vue项目中表格数据滚动 滚动到最后一条数据 重新调用接口
效果:
normal video
HTML代码
<el-table
height="86%"
:data="orgNameData"
:header-cell-style="{
background: '#0655ff8a',
textAlign: 'center',
color:'#fff'
}"
highlight-current-row
style="width: 98%"
ref="sdangerTable"
@cell-mouse-enter="startScroll"
@cell-mouse-leave="stopScroll"
>
<el-table-column
prop="orgName"
min-width="70"
:show-overflow-tooltip="true"
label="姓名"
align="center"
/>
<el-table-column
label="单位"
min-width="68"
prop="calledNum"
align="center"
:show-overflow-tooltip="true"
/>
</el-table>
JS代码
props: {
selectData: {
type: Array,
default: [],
},
},
watch: {
selectData: function (newVal, oldVal) {
this.getBranchData();
},
},
data() {
return {
branchData: [],
interval: null,
orgNameData: [],
clientHeight:""
};
},
methods:{
startScroll() {
clearInterval(this.interval);
this.interval = null;
},
stopScroll() {
this.tableScroll();
},
//滚动方法 (主要代码)
tableScroll(){
const table = this.$refs.sdangerTable
const divData = table.bodyWrapper
setInterval(() => {
divData.scrollTop += 1
if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
if(table.tableData.length>5){
divData.scrollTop = 0
this.getBranchData();
}
}
},1000)
const that = this
window.onresize = () => {
return (() => {
window.screenHeight = document.body.clientHeight
that.clientHeight = window.screenHeight
})()
}
},
//接口
getBranchData(){
let query={}
getBranchOfficeStatistics(query).then((res)=>{
this.orgNameData = []
res.data.map((item)=>{
this.orgNameData.push(
Object.assign({name:item.orgName,value:item.orgCode}),
)
})
setTimeout(() => {
this.$emit("changeTitle",this.orgNameData)
}, 6000);
},
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)