<template>
<div class="home" style="overflow:hidden" id="main-inner-content">
<BaseTable
:columns="tableColumns"
:tableData="tableData"
:isScroll="true"
:tableHeight="500"
:border="true"
ref="table">
<template slot="opration">
<el-button size="small">编辑</el-button>
<el-button size="small">删除</el-button>
</template>
</BaseTable>
</div>
</template>
<script>
import {getTableData} from '@/api/dataExport.js';
export default {
name: 'Home',
components: {
},
data() {
return {
tableColumns:[
{
title: "id",
// scopedSlots: { customRender: "fileName" },
dataIndex: "key",
width:100,
ellipsis: false
},
{
title: "文件名",
// scopedSlots: { customRender: "fileName" },
dataIndex: "oppFlgValue",
width:100,
ellipsis: false
},
{
title: "模型名称",
dataIndex: "oppNam",
width: 100,
ellipsis: false
},
{
title: "模型状态",
dataIndex:'oppRgn',
// scopedSlots: { customRender: "" },
// width: 100,
ellipsis: true
},
{
title: "模型标签",
dataIndex: "oppNbr",
ellipsis: true,
width: 150
},
{
title: "模型标签",
dataIndex: "oppRgnValue",
ellipsis: true,
width: 150
},
{
title: "模型标签",
dataIndex: "ipAdrValue",
ellipsis: true,
// width: 150
},
{
title: "模型标签",
dataIndex: "oppBrnValue",
ellipsis: true,
// width: 150
},
{
title: "模型标签",
dataIndex: "ipAdr",
ellipsis: true,
// width: 150
},
{
title: "操作",
scopedSlots: { customRender: "opration" },
// width: 100,
// align: "center",
// fixed: "right",
// ellipsis: true
}
],
tableData:[],
datas:[],
startOffset:0
}
},
created() {
let params ={
startDate: '2023-03-05',
endDate: '2023-08-31',
custSource: 'VBS',
custUid: 'PCIF1259018467',
pageNum: 1,
pageSize: 10000,
}
getTableData(params).then(res => {
console.log(res.data.page.list)
this.datas = res.data.page.list
for(let i=0;i<10;i++){
this.datas = this.datas.concat(res.data.page.list)
}
console.log(this.datas.length)
let allHeight = 500
let lineHeight = 40
let pageCount = Math.round(allHeight/lineHeight)
this.tableData = this.datas.slice(0, pageCount);
})
for(let i=0;i<10000;i++){
this.datas.push({fileName:''+i})
}
let allHeight = 500
let lineHeight = 40
let pageCount = Math.round(allHeight/lineHeight)
this.tableData = this.datas.slice(0, pageCount);
},
mounted() {
// let params ={
// startDate: '2023-03-05',
// endDate: '2023-08-31',
// custSource: 'VBS',
// custUid: 'PCIF1259018467',
// pageNum: 1,
// pageSize: 10000,
// }
// getTableData(params).then(res => {
// this.datas = res.data.page.list
// for(let i=0;i<10;i++){
// this.datas = this.datas.concat(JSON.parse(JSON.stringify(res.data.page.list)))
// }
// for(let j=0;j<this.datas.length;j++){
// this.datas[j].key = j
// }
// let allHeight = 500
// let lineHeight = 40
// let pageCount = Math.round(allHeight/lineHeight)
// this.tableData = this.datas.slice(0, pageCount);
// this.handleTableScroll()
// })
this.handleTableScroll()
},
methods:{
getTransform () {
// console.log(`translate3d(0,${thi s.startOffset}px,0)`)
return `translate3d(0,${this.startOffset}px,0)`;
// return `translateY(${this.startOffset}px)`
},
handleTableScroll() {
let allHeight = 500
let lineHeight = 50
this.dom = this.$refs.table.$refs.BaseTable.bodyWrapper
var element = this.$refs.table.$refs.BaseTable.bodyWrapper
var div = document.createElement("div"); //创建段落元素
div.style.height= this.datas.length*50 + 'px'
div.style.position = 'absolute'
div.style.width = '1px'
div.className = 'myDiv'
element.insertBefore(div,element.children[0]);
// console.log(element.scrollHeight)
// window.scrollTo(0, element.scrollHeight);
// let myDiv = document.querySelector('.myDiv')
// console.log(myDiv.offsetTop,myDiv.offsetParent)
this.dom.addEventListener('scroll', () => {
// // 滚动距离
let scrollTop = this.dom.scrollTop
// element.style.height = parseFloat(element.style.height)+scrollTop + 'px'
let startIndex = Math.floor(scrollTop / lineHeight);
let endIndex = Math.ceil((scrollTop + allHeight) / lineHeight);
this.tableData = this.datas.slice(startIndex, endIndex);
// 列表移动距离
this.startOffset = scrollTop - (scrollTop % lineHeight);
console.log(scrollTop,scrollTop % lineHeight)
let tableBody = document.querySelector('.el-table__body')
tableBody.style.transform = this.getTransform()
// tableBody.style.height = '4000px'
// let table = document.querySelector('tbody')
// table.style.transform = this.getTransform()
// let trArr = [...document.querySelectorAll('tr')].slice(1)
// trArr.forEach((item,index) => {
// console.log(index)
// item.style.transform = `translate3d(0,${this.startOffset}px,0)`
// })
}
)
}
}
}
</script>
<style scoped lang="less">
/deep/.el-table .el-table__cell{
height:50px;
}
</style>
