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

爱被打了一巴掌 2022-11-27 03:26 408阅读 0赞

vue项目使用el-table实现无限滚动  
案例如图所示，该案例是一个弹框内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center]

注意：属性可参考ElementUi中的InfiniteScroll 无限滚动，当数据不再继续请求接口时可用“infinite-scroll-disabled”属性判断是否继续加载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center 1]

git地址如下：

> https://github.com/ElemeFE/vue-infinite-scroll

git上网页截图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center 3]

步骤如下：  
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，局部引用

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">
                            
                            <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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/c25196fe9d8f405f8d3e01a384993ca6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/da52c4be71fc46f998b87618eb7a5715.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/a562b223fcb743ed8fcbfcfa64ce2e23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/976abd2b352642ec929255ea21ff7a43.png