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
|
| // 设置表格高度
| const doResize = async (el, binding, vnode) => {
| // 获取表格Dom对象
| const {
| componentInstance: $table
| } = await vnode
| // 获取调用传递过来的数据
| const {
| value
| } = binding
| if (!$table.height) {
| throw new Error("使用v-table指令,el-table需设置height,例如: height='0'")
| }
| // 获取距底部距离（用于展示页码等信息）
| const bottomOffset = value || 100
| if (!$table) return
| // 计算列表高度并设置
| let height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
| height = height + 32 // 针对没有底部适配
| $table.layout.setHeight(height)
| $table.doLayout()
| }
| // 节流函数
| const throttle = (fn) => {
| let flag = null
| return function () {
| if (!flag) {
| flag = setTimeout(() => {
| fn()
| flag = null
| }
| , 500)
| }
| }
| }
|
| export default {
| // 初始化设置
| bind (el, binding, vnode) {
| // 设置resize监听方法
| el.resizeListener = async () => {
| await doResize(el, binding, vnode)
| }
| // 绑定监听方法
| window.addEventListener('resize', throttle(el.resizeListener))
| },
|
| // 绑定默认高度
| async inserted (el, binding, vnode) {
| await doResize(el, binding, vnode)
| },
| // 更新数据时延时绑定高度
| async componentUpdated (el, binding, vnode) {
| await setTimeout(() => {
| doResize(el, binding, vnode)
| }, 500)
| },
| // 销毁时设置
| unbind (el) {
| // 移除resize监听
| window.removeEventListener('resize', throttle(el.resizeListener))
| }
| }
|
|
