ct-component-plus 0.0.44 → 0.0.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/packages/utils/table.js +0 -135
package/package.json
CHANGED
package/packages/utils/table.js
DELETED
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 思路:通过简单的 el-table的 thead和tbody父级别区域，进行设置对于的fixed
|
|
3
|
-
* 1.复制一份 thead 设置为fixed,先隐藏掉。
|
|
4
|
-
* 2.创建滚动条监听事件，根据滚动条计算表格所在可视窗口位置。设置thead副本是否显示
|
|
5
|
-
* 3.创建横向滚动条的属性变化监听。当监听变化时，说明在拖动横向滚动条，需要将设置对应副本的表头位置，防止错位
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
function getElParentBySelector(el, queryClassSelector) {
|
|
9
|
-
if (!el) {
|
|
10
|
-
return el
|
|
11
|
-
}
|
|
12
|
-
if ([...el.classList].includes(queryClassSelector)) {
|
|
13
|
-
return el
|
|
14
|
-
}
|
|
15
|
-
return getElParentBySelector(el.parentNode, queryClassSelector)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
function getTableShowWidth(thead) {
|
|
19
|
-
const tableBox = getElParentBySelector(thead, 'el-table')
|
|
20
|
-
return tableBox.getBoundingClientRect().width
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
//使用setTime来确保不会重复设置
|
|
24
|
-
|
|
25
|
-
function createTableSticky(el, binding, vNode) {
|
|
26
|
-
let stickyTop = binding.value.top || 0
|
|
27
|
-
const zIndex = binding.value.zIndex || 0
|
|
28
|
-
stickyTop = parseFloat(stickyTop)
|
|
29
|
-
// 获取表格(element)
|
|
30
|
-
let thead = el.querySelector('.el-table__header')
|
|
31
|
-
thead = getElParentBySelector(thead, 'el-table__header-wrapper')
|
|
32
|
-
const tbody = el.querySelector('.el-scrollbar') || el.querySelector('.el-table__body')
|
|
33
|
-
// const tableBox = el.querySelector('.el-table__inner-wrapper')
|
|
34
|
-
|
|
35
|
-
const elBodyBox = el.querySelector('.el-table__body-wrapper')
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* 插入副本元素，确保文档流不塌陷
|
|
39
|
-
*/
|
|
40
|
-
const copyThead = thead.cloneNode(true)
|
|
41
|
-
copyThead.classList.add('el-table_header-copy')
|
|
42
|
-
copyThead.style.display = 'none'
|
|
43
|
-
copyThead.style.position = 'fixed'
|
|
44
|
-
copyThead.style.zIndex = zIndex || 1994
|
|
45
|
-
copyThead.style.top = stickyTop + 'px'
|
|
46
|
-
copyThead.style.backgroundColor = '#fff'
|
|
47
|
-
copyThead.style.borderTop = '1px solid #999999'
|
|
48
|
-
|
|
49
|
-
thead.parentNode.insertBefore(copyThead, elBodyBox)
|
|
50
|
-
|
|
51
|
-
//获取thead 的显示宽度
|
|
52
|
-
const headerShowWidth = getTableShowWidth(thead)
|
|
53
|
-
|
|
54
|
-
// 获取滚动元素
|
|
55
|
-
const scrollParent = document.querySelector(binding.value.parent || 'body')
|
|
56
|
-
if (!scrollParent || binding.value.disabled === true) {
|
|
57
|
-
return
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
scrollParent.addEventListener('scroll', function () {
|
|
61
|
-
const theadHeight = thead.clientHeight
|
|
62
|
-
// 获取thead距离顶部的距离
|
|
63
|
-
const theadTop = thead.getBoundingClientRect().top
|
|
64
|
-
// 判断是否需要回归原来位置
|
|
65
|
-
const originally = tbody.getBoundingClientRect().top
|
|
66
|
-
// 判断底部距离是否超过表头
|
|
67
|
-
const goBeyond = tbody.getBoundingClientRect().bottom
|
|
68
|
-
|
|
69
|
-
if (theadTop <= stickyTop) {
|
|
70
|
-
copyThead.style.display = 'block'
|
|
71
|
-
copyThead.style.width =
|
|
72
|
-
(tbody.offsetWidth < headerShowWidth ? tbody.offsetWidth : headerShowWidth) + 'px'
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
if (originally - theadHeight > stickyTop || goBeyond - theadHeight / 2 <= stickyTop) {
|
|
76
|
-
//影藏副本
|
|
77
|
-
copyThead.style.display = 'none'
|
|
78
|
-
}
|
|
79
|
-
})
|
|
80
|
-
|
|
81
|
-
try {
|
|
82
|
-
//启动底部滚动条监控，防止横向滚动条滚动，表头没有动的问题
|
|
83
|
-
const elThumbBut = el.querySelector(
|
|
84
|
-
'.el-table__body-wrapper .el-scrollbar .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb'
|
|
85
|
-
)
|
|
86
|
-
if (elThumbBut) {
|
|
87
|
-
const observer = new MutationObserver(mutationsList => {
|
|
88
|
-
for (const mutation of mutationsList) {
|
|
89
|
-
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
|
|
90
|
-
// CSS样式发生了变化
|
|
91
|
-
// 将 thumb 滚动条的
|
|
92
|
-
const transformX = elThumbBut.style.transform
|
|
93
|
-
if (transformX) {
|
|
94
|
-
copyThead.querySelector(
|
|
95
|
-
'.el-table__header'
|
|
96
|
-
).style.marginLeft = `-${transformX.replace(/[a-zA-Z()]/g, '')}`
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
})
|
|
101
|
-
//开始监听横向滚动条
|
|
102
|
-
observer.observe(elThumbBut, { attributes: true })
|
|
103
|
-
}
|
|
104
|
-
} catch (error) { }
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
export function createSticky(vue) {
|
|
108
|
-
let clearTimeId = 0
|
|
109
|
-
// el-table表头吸顶效果
|
|
110
|
-
vue.directive('sticky', {
|
|
111
|
-
// 当被绑定的元素插入到 DOM 中时……
|
|
112
|
-
mounted(el, binding) {
|
|
113
|
-
const random = parseInt(Math.random() * 10 + '')
|
|
114
|
-
//TIP 延时设置，确保表格进行渲染成功！
|
|
115
|
-
clearTimeId = setTimeout(() => {
|
|
116
|
-
createTableSticky(el, binding)
|
|
117
|
-
// clearTimeout(clearTimeId)
|
|
118
|
-
}, 1000 + random)
|
|
119
|
-
},
|
|
120
|
-
|
|
121
|
-
update(el, binding) {
|
|
122
|
-
const random = parseInt(Math.random() * 10 + '')
|
|
123
|
-
//TIP 延时设置，确保表格进行渲染成功！
|
|
124
|
-
clearTimeId = setTimeout(() => {
|
|
125
|
-
createTableSticky(el, binding)
|
|
126
|
-
// clearTimeout(clearTimeId)
|
|
127
|
-
}, 1000 + random)
|
|
128
|
-
},
|
|
129
|
-
|
|
130
|
-
unmounted(el, binding) {
|
|
131
|
-
clearTimeId && clearTimeout(clearTimeId)
|
|
132
|
-
}
|
|
133
|
-
})
|
|
134
|
-
}
|
|
135
|
-
|