vue element 表格滑动加载
<el-tablev-loadmore="getNewData"v-loading="loadingData":data="tableData"style="width: 100%"max-height="800"><el-table-columnv-for
·
<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
})
},
更多推荐
已为社区贡献5条内容
所有评论(0)