element-ui的el-table表格实现无限滚动，使用自带的infinite-scroll_elementui infinitescroll table

背景：
需要在el-tablel里实现滚动到底部加载更多数据
问题：使用element自带的无限滚动，但是实际用下来发现，指令只能作用于当前绑定的元素上，如下：

    <ul class="infinite-list" v-infinite-scroll = "load" style="overflow:auto; height: 200px;">
      <li v-for="(item, index) in tableData" :key="index">{{ item.name }}</li>
    </ul>
1
2
3

对于不是真正的出现滚动条的标签，却无能为力

<el-table
   border
   height="400"
   v-infinite-scroll="load"
   :data="tableData"
   >
   <el-table-column prop="date" label="日期" width="180"></el-table-column>
   <el-table-column prop="name" label="姓名" width="150"></el-table-column>
   <el-table-column prop="address" label="地址" width="240"></el-table-column>
 </el-table>
1
2
3
4
5
6
7
8
9
10

标签不是真正的容器，绑定了指令，无法生效
实现
第一步：判断滚到底部

const { scrollTop, scrollHeight, clientHeight }  = targetEl
if(scrollHeight === scrollTop + clientHeight) {
    console.log('到底部了！')
}
1
2
3
4

简洁版：

export default {
	name: 'load-more',
	bind(el, binding, vnode) {
		binding.handler = function(){
			const {scrollTop, scrollHeight, clientHeight} = el
			if (scrollHeight === scrollTop + clientHeight) {
				binding.value && binding.value()
			}
		}
		el.addEventListener('scroll', binding.handler)
	},
	unbind(el, binding) {
		el.removeEventListener('scroll', binding.handler)
		el = null
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

把写好的指令在组件内注册后，即可生效。

我们的指令能够支持：

1. 可指定作用的元素
2. 是否禁止无限加载
3. 支持设置滚动到底部的偏移量
4. 支持防抖

完整代码：

<template>
  <div>
    <el-table
      border
      height="400"
      :data="visibleData"
      :row-key="getRowKeys"
      v-load-more.expand="{func: loadmore, target: '.el-table__body-wrapper', delay: 300}"
      :load-more-disabled="disabledLoad"
      @selection-change="handleSelectionChange"
      >
      <el-table-column type="selection" :reserve-selection="true" width="55"> </el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <div slot="append" style="text-align: center;">滚动到底部加载更多</div>
    </el-table>
  </div>
</template>

<script>
const debounce = function (func, delay) {
  let timer = null
  return function () {
      if (timer) clearTimeout(timer)
      timer = null
      let self = this
      let args = arguments
      timer = setTimeout(() => {
          func.apply(self, args)
      }, delay)
    }
  }
export default {
    directives: {
    'load-more': {
      bind (el, binding, vnode) {
          const { expand } = binding.modifiers
          // 使用更丰富的功能，支持父组件的指令作用在指定的子组件上
          if (expand) {
              /**
               * target 目标DOM节点的类名
               * distance 减少触发加载的距离阈值，单位为px
               * func 触发的方法
               * delay 防抖时延，单位为ms
               * load-more-disabled 是否禁用无限加载
               */
              let { target, distance = 0, func, delay = 200 } = binding.value
              if (typeof target !== 'string') return
              let targetEl = el.querySelector(target)
              if (!targetEl) {
                  console.log('找不到容器')
                  return
              }
              binding.handler = debounce(function () {
                  const { scrollTop, scrollHeight, clientHeight } = targetEl
                  let disabled = el.getAttribute('load-more-disabled')
                  disabled = vnode[disabled] || disabled

                  if (scrollHeight <= scrollTop + clientHeight + distance) {
                      if (disabled) return
                      func && func()
                  }
              }, delay)
              targetEl.addEventListener('scroll', binding.handler)
          } else {
              binding.handler = helper.debounce(function () {
                  const { scrollTop, scrollHeight, clientHeight }  = el
                  if (scrollHeight === scrollTop + clientHeight) {
                      binding.value && binding.value()
                  }
              }, 200)
              el.addEventListener('scroll', binding.handler)
          }
      },
      unbind (el, binding) {
          let { arg } = binding
          // 使用更丰富的功能，支持父组件的指令作用在指定的子组件上
          if (arg === 'expand') {
              /**
               * target 目标DOM节点的类名
               * offset 触发加载的距离阈值，单位为px
               * method 触发的方法
               * delay 防抖时延，单位为ms
               */
              const { target } = binding.value
              if (typeof target !== 'string') return
              let targetEl = el.querySelector(target)
              targetEl && targetEl.removeEventListener('scroll', binding.handler)
              targetEl = null
          } else {
              el.removeEventListener('scroll', binding.handler)
              el = null
          }
      }
    }
  },
  data() {
    return  {
      visibleCount: 10,
      tableData: [
        {id: '234', date: '2016-06-01'},
        {id: '34', date: '2016-06-01'},
        {id: '24', date: '2016-06-01'},
        {id: '23242', date: '2016-06-01'},
        {id: '23243', date: '2016-06-01'},
        {id: '23244', date: '2016-06-01'},
        {id: '23245', date: '2016-06-01'},
        {id: '23246', date: '2016-06-01'},
        {id: '23247', date: '2016-06-01'},
        {id: '23248', date: '2016-06-01'}
      ],
      multipleSelection: []
    }
  },
  created() {
    let count = 1
    while(count >= 0) {
      count--
      this.tableData.push(
        { id: '1213', date: '2016-05-02' },
        { id: '11123', date: '2016-05-02' },
        { id: '123023', date: '2016-05-02' },
        { id: '1253', date: '2016-05-02' },
        { id: '1243', date: '2016-05-02' },
        { id: '1263', date: '2016-05-02' },
        { id: '1273', date: '2016-05-02' },
        { id: '1283', date: '2016-05-02' },
        { id: '1293', date: '2016-05-02' },
        { id: '1203', date: '2016-05-02' },
        { id: '1323', date: '2016-05-02' },
        { id: '1423', date: '2016-05-02' },
        { id: '1523', date: '2016-05-02' },
        { id: '1623', date: '2016-05-02' },
        { id: '1723', date: '2016-05-02' },
        { id: '1823', date: '2016-05-02' },
        { id: '1923', date: '2016-05-02' },
        { id: '1023', date: '2016-05-02' },
        { id: '12323', date: '2016-05-02' },
        { id: '134323', date: '2016-05-02' }
      )
    }
  },
  computed: {
    disabledLoad() {
      return false
    },
    visibleData() {
      return this.tableData.slice(0, Math.min(this.tableData.length, this.visibleCount))
    }
  },
  methods: {
    loadmore() {
      console.log('滚动到底部了');
      this.visibleCount += 10;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
      const ids = this.multipleSelection.map(item => {
        return item.id
      })
      console.log(ids)
    },
    getRowKeys(row) {
      return row.id
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169

注：
el-table里的:row-key="getRowKeys"和@selection-change="handleSelectionChange"
配合el-table-column里的:reserve-selection="true"
实现了无限加载的同时记住已选内容

参考文章：
element-ui表格 实现滚动到底部加载更多