美文网首页
el-table 配合 infinite-loading

el-table 配合 infinite-loading

作者: 阿克兰 | 来源:发表于2020-10-13 20:26 被阅读0次
<template>
  <div>
    <div style="margin: 30px 40px 20px 60px ">
      <h4>权限信息</h4>
      <el-table :data="permissionValue" max-height="289" border style="width: 100%">
        <el-table-column label="权限项" prop="value"></el-table-column>
        <el-table-column label="权限描述" prop="des"></el-table-column>
        <template  slot="append">
          <infinite-loading
            ref="Infinite"
            @infinite="infiniteHandler"
            spinner="circles"
            force-use-infinite-wrapper=".el-table__body-wrapper"
          >
            <div class="infinite-loading-noMore" slot="no-more">没有更多了...</div>
            <div slot="no-results"></div>
          </infinite-loading>
        </template>
      </el-table>
    </div>
  </div>
</template>
//   force-use-infinite-wrapper=".el-table__body-wrapper"  设置这个指定滚动的是table而不是全屏

如果报了以下错误

vue-infinite-loading.js?00d1:6 [Vue-infinite-loading error]: executed the callback function more than 10 times for a short time, it looks like searched a wrong scroll wrapper that doest not has fixed height or maximum height, please check it. If you want to force to set a element as scroll wrapper ranther than automatic searching, you can do this:


<div infinite-wrapper>
...

<infinite-loading force-use-infinite-wrapper></infinite-loading>
</div>
or
<div class="infinite-wrapper">
...

<infinite-loading force-use-infinite-wrapper=".infinite-wrapper"></infinite-loading>
</div>

more details: https://github.com/PeachScript/vue-infinite-loading/issues/55#issuecomment-316934169

可能原因是既没有给el-table加高度,也没有加 force-use-infinite-wrapper=".el-table__body-wrapper",

如果滚动el-table无法触发可能是没有加 force-use-infinite-wrapper=".el-table__body-wrapper"

相关文章

网友评论

      本文标题:el-table 配合 infinite-loading

      本文链接:https://www.haomeiwen.com/subject/swlbpktx.html