iview table无限滚动

iview table无限滚动

第一次实现发现iview存在无限滚动的组件 原以为可以直接用上

<Scroll class="menu-item" :on-reach-bottom="handleReachBottom">
    <div class="menu-item">
      <Table :ref="id" :columns="columns"  :data="data"></Table>
    </div>
</Scroll>
<script>
export default {
  props:{
    id: {
        type: String,
        default: () => {return ""}
    }
  },
  data() {
    return {
      columns: [
        {
          type: 'index',
          key: "index",
        },
        {
          title: "Name",
          key: "name",
        },
        {
          title: "Age",
          key: "age",
        },
        {
          title: "Address",
          key: "address",
        },
      ],
      data: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
      ],
    };
  },
  methods: {
	handleReachBottom () {
        return new Promise(resolve => {
            setTimeout(() => {
            //     const last = this.list[this.list.length - 1];
                for (let i = 1; i < 11; i++) {
                    this.data.push({
                        name: "Jon Snow",
                        age: 26,
                        address: "Ottawa No. 2 Lake Park",
                        date: "2016-10-04",
                        });
                }
                resolve();
            }, 1000);
        });
    }
  },
};
</script>

后面发现加上height后会产生两个滚动条，如果不加高度则无法固定表头
于是使用监听事件：
直接在mounted中写监听方法：

mounted() {
//由于我使用父子组件的原因 使用ref进行区分 页面只有一个的情况可以使用
//document.getElementsByClassName('ivu-table-body')[0].addEventListener('scroll', （event）={ });方法
    this.$refs[this.id].$refs['body'].addEventListener('scroll', (event) => {
        let scrollTop = event.target.scrollTop;
        let clientHeight  = event.target.clientHeight;
        let scrollHeight  = event.target.scrollHeight ;
        if(scrollTop + clientHeight === scrollHeight-1){
            for (let i = 1; i < 11; i++) {
                this.data.push({
                    name: "Jon Snow",
                    age: 26,
                    address: "Ottawa No. 2 Lake Park",
                    date: "2016-10-04",
                    });
            }
        }
    });
}

效果：