**element-ui Table中使用**

```
<el-table :data="list" id=" table-content" :height="tableHeight">
        ...
        <template slot="append">
          <infinite-loading @infinite="getFaceList" spinner="circles" ref="Infinite" :distance='0'>
            <span slot="no-more">
             已加载全部
            </span>
            <span slot="no-results">暂无数据</span>
          </infinite-loading>
        </template>

</el-table>
<!--一般需要表格头部固定设置固高，为避免触底之后无限请求，需要对表格item的父级容器 .el-table__body-wrapper添加 固高以及overflow: auto;属性
或者直接指定滚动父级容器，添加属性 force-use-infinite-wrapper=".el-table__body-wrapper"。若统一页面存在多个表格即需要添加更加详细的css选择器
-->
<!--JS部分如下-->
<script>
export default {
    ....
    methods:{
        getFaceList ($state){
            $.ajax({
                ...
                success:(res)=>{
                      if (res.data.list.length) {
                        this.list = this.list.concat(res.data.list)
                        $state.loaded()
                        this.pageNumber += 1
                      } else {
                        $state.complete()
                      }
                }
            })
        }
    }
}
</script>
```
**list中使用**

```
<div>
    <ul>
        <li v-for="(item, key) in list" :key="key">{{item}}</li>
    </ul>
    <infinite-loading @infinite="getFaceList" spinner="circles" ref="Infinite" distance='0' force-use-infinite-wrapper=".el-table__body-wrapper">
        <span slot="no-more">
        已加载全部
        </span>
        <span slot="no-results">暂无数据</span>
    </infinite-loading>
</div>
<!--JS需要手动拼接  请求相同-->
<script>
    ...
    <!---->
    this.list.unshift(...res.data.list.reverse())
</script>
```

---
> 属性
- distance --滚动条的距离小于此值时，infinite 事件将会被触发 /类型:Number/默认值:100
- spinner--设置加载动画/类型:String/有效值:default | spiral | circles | bubbles | waveDots/也可以slot自定义  slot="spinner" 
- identifier配合过滤器选项卡使用


```
  <select v-model="newsType" @change="changeType">
    <!-- Type options -->
  </select>
  <div v-for="(item, $index) in list" :key="$index">
    <!-- Hacker News item loop -->
  </div>

  <infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
```
*在模板中添加了一个 select 元素并监听它的 change 事件，我们还为 InfiniteLoading 组件添加了一个 identifier 属性*

```
import axios from 'axios';

const api = '//hn.algolia.com/api/v1/search_by_date';

export default {
  data() {
    return {
      page: 1,
      list: [],
      newsType: 'story',
      infiniteId: +new Date(),
    };
  },
  methods: {
    infiniteHandler($state) {
      axios.get(api, {
        params: {
          page: this.page,
          tags: this.newsType,
        },
      }).then(({ data }) => {
        if (data.hits.length) {
          this.page += 1;
          this.list.push(...data.hits);
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
    changeType() {
      this.page = 1;
      this.list = [];
      this.infiniteId += 1;
    },
  },
};
```
*我们为 select 和 identifier 属性设定了默认值，然后在 API 请求逻辑中添加了类型参数。我们还创建了一个 changeType 方法用于重设列表数据和加载组件，请注意，我们必须在清空列表之后再改变 identifier 属性，否则组件将可能无法在重设之后立即触发 infinite 事件*



> 插槽 
- no-results、no-more、error、spinner

> **全局配置项 --- 优先级高于自定义插槽**
- 属性配置

```
import Vue from 'vue';
import InfiniteLoading from 'vue-infinite-loading';

Vue.use(InfiniteLoading, {
  props: {
    spinner: 'default',
    /* other props need to configure */
  }
});
```
- 插槽配置
>  和属性及配置不一样，插槽选项可以是一个字符串，也可以是一个 Vue Component

```
import Vue from 'vue';
import InfiniteLoading from 'vue-infinite-loading';
import InfiniteError from 'path/to/your/components/InfiniteError';

Vue.use(InfiniteLoading, {
  slots: {
    noMore: 'No more message', // you can pass a string value
    error: InfiniteError, // you also can pass a Vue component as a slot
  },
});
```
