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

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);
1
2
3
4

3，局部引用

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}
</script>
1
2
3
4
5
6
7
8
9

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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183