产品要求,需要对el-table实现下拉加载 并且可以实现排序
话不多说,直接贴一下我的代码吧
<style lang="scss" rel="stylesheet/scss" slot-scoped>
.sortable-ghost{
opacity: .8;
color: #fff!important;
background: #42b983!important;
}
}
</style>
<template>
<cd-page id="anticipation-priority" :breadcrumb="false" v-loading="loading">
<div class="date-table">
<el-table
height="500px"
:data="dataList">
<el-table-column
prop="priorityNumber"
label="优先级调整"
align="center"
:show-overflow-tooltip="true"
min-width="80">
<template slot-scope="scope">
<div class="left-img textc"><span class="left_img-text">{{scope.row.priorityNumber}}</span></div>
</template>
</el-table-column>
<el-table-column
prop="registeredDate"
label="登记时间"
align="center"
:show-overflow-tooltip="true"
min-width="120">
</el-table-column>
<el-table-column
prop="orgName"
label="企业名称"
align="center"
:show-overflow-tooltip="true"
min-width="160">
</el-table-column>
<el-table-column
prop="saleUser"
label="销售负责人"
align="center"
:show-overflow-tooltip="true"
min-width="100">
</el-table-column>
<el-table-column
prop="anticipationLeader"
label="预判负责人"
align="center"
:show-overflow-tooltip="true"
min-width="100">
</el-table-column>
<el-table-column
prop="projectStageDesc"
label="阶段"
align="center"
:show-overflow-tooltip="true"
min-width="80">
</el-table-column>
<template slot="append">
<infinite-loading ref="Infinite" @infinite="onInfinite" spinner="circles" :forceUseInfiniteWrapper="true">
<span slot="no-more">
—————————————————————————— 加载完成 ————————————————————————————
</span>
<span slot="no-results">暂无数据</span>
</infinite-loading>
</template>
</el-table>
</div>
</cd-page>
</template>
<script>
import {CdPage} from 'comp@'
import {Table, TableColumn} from 'element-ui'
import InfiniteLoading from 'vue-infinite-loading'
import {codeAnticipationApi} from 'api@'
import dayjs from 'dayjs'
import Sortable from 'sortablejs'
export default {
components: {
CdPage,
[Table.name]: Table,
[TableColumn.name]: TableColumn,
InfiniteLoading
},
name: 'anti-pri',
data () {
return {
loading: false,
dataList: [],
page: 1,
sortable: null,
numberList: ''
}
},
methods: {
onInfinite ($state) {
let query = {
projectStatus: '10_PROCESSING,30_OVER',
projectStage: '10_REGISTRATION,20_ALLOCATION,30_ANALYZING,40_REVIEW'
}
codeAnticipationApi.anticipationQuery(query, this.page, 50).then((rst) => {
if (rst) {
if (rst.content.length) {
rst.content.forEach((item) => {
item.registeredDate = item.registeredDate ? dayjs(item.registeredDate).format('YYYY-MM-DD') : ''
item.anticipationLeader = item.anticipationLeader || '无'
item.saleUser = item.saleUser || '无'
})
this.dataList = this.dataList.concat(rst.content)
this.numberList = this.dataList.map(v => v.priorityNumber)
$state.loaded()
this.page += 1
if (this.dataList.length % 50 !== 0) {
$state.complete()
}
} else {
$state.complete()
}
} else {
$state.complete()
}
}).catch(error => {
this.$message.error('数据加载失败!原因:' + error)
$state.complete()
})
},
setSort () {
const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost',
setData: function (dataTransfer) {
dataTransfer.setData('Text', '')
// to avoid Firefox bug
},
onEnd: evt => {
const targetRow = this.dataList.splice(evt.oldIndex, 1)[0]
const tempIndex = this.numberList.splice(evt.newIndex, 1)[0]
let data = {
anticipationId: targetRow.anticipationId,
priorityNumber: tempIndex
}
codeAnticipationApi.anticipationPriority(data).then((res) => {
this.page = 1
this.$set(this, 'dataList', [])
this.$nextTick(() => {
this.$refs.Infinite.$emit('$InfiniteLoading:reset')
})
}).catch((error) => {
this.$message.error('排序失败:' + error)
})
}
})
}
},
created () {
this.$nextTick(() => {
this.setSort()
})
}
}
</script>
放一下vue-infinite-loading 的官网链接: 官方
我用的版本号是2.3.3
这里提一下遇到的一个问题
vue-infinite-loading 配合el-table 他如果滚动条往下滚动,再this.$refs.Infinite.$emit('$InfiniteLoading:reset') 的时候,会触发两次请求,找了很久,一值没解决问题,结果,不得已看一下源码,发现
居然还有这个属性!!!!,把其加上去,完美解决。提了一个issue问了一下,作者是准备在下一个版本迭代的时候,补上文档。希望对你们有所帮助,谢谢
最后放一下效果: