vue项目使用el-table实现无限滚动
vue项目使用el-table实现无限滚动案例如图所示,该案例是一个弹框内容注意:属性可参考ElementUi中的InfiniteScroll 无限滚动,当数据不再继续请求接口时可用“infinite-scroll-disabled”属性判断是否继续加载步骤如下:1,前端安装“save el-table-infinite-scrol”cnpm install --save el-table-inf
·
vue项目使用el-table实现无限滚动
案例如图所示,该案例是一个弹框内容
注意:属性可参考ElementUi中的InfiniteScroll 无限滚动,当数据不再继续请求接口时可用“infinite-scroll-disabled”属性判断是否继续加载
git地址如下:
https://github.com/ElemeFE/vue-infinite-scroll
git上网页截图
步骤如下:
1,前端安装“save el-table-infinite-scrol”
cnpm install --save el-table-infinite-scroll
2,全局引用,在main.js中引用(vue3项目)
import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';
Vue.use(elTableInfiniteScroll);
3,局部引用
<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
directives: {
'el-table-infinite-scroll': elTableInfiniteScroll
}
}
</script>
4,案例如下:结果如上图所示:
<template>
<div class="job-content">
<div class="top-block">
<el-input
class="top-in"
placeholder="请输入内容"
size="small"
v-model="searchWord">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
<div class="tab-block">
<el-table
v-loading="loading"
:data="tabDtatList"
style="width: 100%"
height="300"
@selection-change="handleSelectionChange"
cell-class-name="my-cell"
v-el-table-infinite-scroll="load"
infinite-scroll-disabled="disabled"
>
<el-table-column
header-align="left"
class-name="myCul"
type="selection"
width="55">
</el-table-column>
<el-table-column
class-name="myCul"
prop="workName"
label="职位名称"
width="150">
</el-table-column>
<el-table-column
prop="personCount"
label="招聘人数"
width="80">
</el-table-column>
<el-table-column
prop="salaryMin"
label="薪水/元">
<template slot-scope="scope">
<!--<el-button @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
-->
<span v-if="scope.row.salaryMin==0 && scope.row.salaryMax==0" >面议</span>
<span v-else>{{scope.row.salaryMin}}-{{scope.row.salaryMax}}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="btn-block">
<span class="btns btn-cancel" @click="clickJobCancel">取消</span>
<span class="btns btn-sure" @click="cliceJobSure">确定</span>
</div>
</div>
</template>
<script>
import {GetSpeechJobList} from '@/network/request'
import {mapGetters} from "vuex";
export default {
name: "JobDataPage",
data() {
return {
tabDtatList:[],
loading: true,
pageObj:{
nowPage:0,//当前页数
pageSize:10,//每页数量
},
disabled:false,
searchWord:'',
selectArr:[],
}
},
computed:{
... mapGetters(['companyInfo']),
},
created() {
// this.getSpeechJobList();
},
mounted() {
console.log("----",this.companyInfo.compId)
},
methods: {
handleSelectionChange(val) {
this.selectArr = val;//勾选放在multipleSelection数组中
console.log("val-==",val)
},
cliceJobSure(){
this.$emit('btnJobSure',this.selectArr)
},
clickJobCancel(){
this.$emit('btnJobCancel')
},
getSpeechJobList(){
this.disabled = true
this.pageObj.nowPage ++;
let cnt = (this.pageObj.nowPage-1) * this.pageObj.pageSize;
let param = {companyId:this.companyInfo.compId,offset:cnt}
GetSpeechJobList(param).then(res =>{
this.disabled = false
//console.log("res==123=",res)
this.loading = false
if(res && res.code === 0 ){
if(!res.data || res.data.length < this.pageObj.pageSize) {
this.disabled = true
}
if(this.pageObj.nowPage==1){
this.tabDtatList = res.data
}else {
this.tabDtatList = this.tabDtatList.concat(res.data)
}
}
})
},
load() {
this.getSpeechJobList();
// console.log("加载下一页-=",this.pageObj.nowPage)
// console.log("加载下一页-=",this.disabled )
},
},
}
</script>
<style scoped lang="less">
.job-content{
padding: 24px 0 24px 24px;
.btn-block{
margin-top: 20px;
text-align: center;
.btns{
width:65px;
height:32px;
line-height: 32px;
text-align: center;
display: inline-block;
border-radius:2px;
font-size: 14px;
&:hover{
cursor: pointer;
}
}
.btn-cancel{
background:rgba(255,255,255,1);
border:1px solid rgba(0,0,0,0.15);
color: #000000;
}
.btn-sure{
margin-left: 8px;
background:rgba(67,127,255,1);
color: #FFFFFF;
}
}
.top-block{
.top-in{
width: 296px;
margin-bottom: 15px;
margin-left: 10px;
}
.top-release{
color: #437FFF;
height:22px;
line-height:22px;
font-size:14px;
padding-left: 12px;
text-decoration: underline;
&:hover{
cursor: pointer;
}
}
}
}
</style>
更多推荐
已为社区贡献26条内容
所有评论(0)