Element ui　table表格实现触底加载更多数据

标签：el aaa name bbb Element ui table

Element ui　table　　代码

<el-table       header-align="center"       v-loadmore="addData"       :data="myData"       height="300"       v-loading="loading"       style="width: 100%"       class="el-table"     >  　 <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>       <el-table-column label="匹配度22" prop="dict_name"> </el-table-column>

</el-table>

export default {   data() {     return {
　　myData:[ 　　　　{name: 'aaa'},
　　　　{name: 'aaa'},
　　　　{name: 'aaa'},

　　　　{name: 'aaa'},
　　　　{name: 'aaa'},
　　　　{name: 'aaa'},
　　　　{name: 'aaa'},
　　　　{name: 'aaa'},
　　　　{name: 'aaa'},
　　　　{name: 'aaa'}
       ]

    }   } } directives: {     loadmore: {       bind(el, binding) {         const selectWrap = el.querySelector(           ".el-table .el-table__body-wrapper"         );         selectWrap.addEventListener("scroll", function () {           const scrollDistance =             this.scrollHeight - this.scrollTop - this.clientHeight;           if (scrollDistance <= 0.5) {             binding.value(); //执行在使用时绑定的函数，在这里即addData方法           }         });       },     },   },
methods: {     addData() {       alert(456);       // 自行添加节流       // 自行判断暂无更多数据       this.myData.push(         ...[           { name: "bbb" },           { name: "bbb" },           { name: "bbb" },           { name: "bbb" },           { name: "bbb" },           { name: "bbb" },           { name: "bbb" },         ]       );     }, } 是不是非常的简单

标签：el,aaa,name,bbb,Element,ui,table
From： https://www.cnblogs.com/dreammiao/p/17989405