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

        ]

      );

    },

}

是不是非常的简单