vue项目使用el-table实现无限滚动-蒲公英云

vue项目使用el-table实现无限滚动

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>