<el-table
v-loadmore="getNewData"
v-loading="loadingData"
:data="tableData"
style="width: 100%"
max-height="800">
<el-table-column
v-for="(item, index) in columns" :key="item.Id"
:fixed="index === 0 ? 'left' : false"
:prop="item.prop" :label="item.name">
</el-table-column>
</el-table>
element中 table表格数据滑动加载
// 自定义局部指令
directives: {
loadmore: {
// 指令的定义
bind(el, binding, vnode) {
const selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function() {
const sign = 100
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrollDistance <= sign) {
binding.value()
// console.log('距离底部小于100了')
// console.log(vnode.context)
// // 指令中不能用this关键字
// vnode.context.getNewData()
}
})
}
}
}
自定义指令中 v-loadmore = 'getNewData'
getNewData() {
if (this.flag === true) {
this.flag = false
this.PageIndex++
// this.loadingData = true
this.getTableData(this.PageIndex, this.pageSize)
}
},
// 请求后台表格数据
getTableData(PageIndex, pageSize) {
searchSalesDetail(Date.parse(this.formInline.startTime) / 1000, PageIndex, pageSize).then(res => {
console.log(res)
const columnsArr = []
for (const i in res.columns[0]) {
const obj = {}
obj.prop = i
obj.name = res.columns[0][i]
columnsArr.push(obj)
}
this.columns = columnsArr
this.tableData.push(...res.data)
this.flag = true
// this.tableData = res.data
this.loadingData = false
})
},
2024-06-05 vue element 表格滑动加载
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 小白入门请多关照.如有问题,还望指点!如果觉得不错请支持一下! 核心代码 更新树状节点注意修改tableRefNa...
- 我觉得数据即表格,数据即echarts,用表格或图形来表达数据,是人类的本能。 而表格在线编辑——点击单元格即进行...