From f4bd562f4c11d98927cdccd1e97830763d97ac2e Mon Sep 17 00:00:00 2001 From: mr_yichen <2151318772@qq.com> Date: Wed, 13 Sep 2023 15:56:24 +0800 Subject: [PATCH 1/6] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E9=80=9A=E7=94=A8=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FutureTable/index.vue | 36 ++++++++++++++++++++-------- 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/src/components/FutureTable/index.vue b/src/components/FutureTable/index.vue index ca1d151..0f504c7 100644 --- a/src/components/FutureTable/index.vue +++ b/src/components/FutureTable/index.vue @@ -57,27 +57,43 @@ const checkstr = ref([]); const optionsList = ref(props.options.column); const Toores = ref(props.options.column.map((e) => e.title)); const grid = ref(``); -for (let i = 0; i < props.options.column.length; i++) { - if (props.options.column[i].width) { - grid.value += `${props.options.column[i].width} `; - } else { - grid.value += `1fr `; + + +/** + * 执行 + */ +const getGrid = (): void => { + grid.value = '' + if ((props).rowCofig.isChecked) { + grid.value = `3% ` + grid.value; + } + for (let i = 0; i < props.options.column.length; i++) { + if (props.options.column[i].width) { + grid.value += `${props.options.column[i].width} `; + } else { + grid.value += `1fr `; + } } } -if ((props).rowCofig.isChecked) { - grid.value = `3% ` + grid.value; +const UPdateS = () => { + optionsList.value = props.options.column + Toores.value = props.options.column.map((e) => e.title) + jingSTyle(); + getGrid() } -watch( + +watch([ () => props.data, + () => props.options], (newvalue) => { nextTick(() => { - jingSTyle(); + UPdateS(); }); } ); nextTick(() => { - jingSTyle(); + UPdateS(); }); const slot = useSlots(); -- Gitee From 054b3ef76eec470c6455bbc70a34d86b325e828c Mon Sep 17 00:00:00 2001 From: mr_yichen <2151318772@qq.com> Date: Wed, 15 Nov 2023 10:58:54 +0800 Subject: [PATCH 2/6] no commit message --- src/views/sysmen/DepManagement/index.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/views/sysmen/DepManagement/index.vue b/src/views/sysmen/DepManagement/index.vue index a76a750..5f7c4c5 100644 --- a/src/views/sysmen/DepManagement/index.vue +++ b/src/views/sysmen/DepManagement/index.vue @@ -121,6 +121,7 @@ -
+ + diff --git a/src/components/FutureTable/index.vue b/src/components/FutureTable/index.vue index 0f504c7..3bdbe7c 100644 --- a/src/components/FutureTable/index.vue +++ b/src/components/FutureTable/index.vue @@ -35,10 +35,19 @@ const handRowStyle = (rows: any, index: number) => { return } }; +const container = ref(null) // 页面 container 节点 +let start = ref(0) // 要展示的数据的起始下标 +let end = ref(10) // 要展示的数据的结束下标 +const shownumber = ref(10) const StyleSheetsH = computed(() => { return { height: props.height, maxHeight: props.maxHeight } }) +const size = ref(0) //一次展示多少条 +const showData = computed>(() => props.data.slice(start.value, end.value)) // 最终筛选出的要展示的数据 +// const containerHeight = computed(() => size.value * shownumber.value + 'px') // 容器的高度 +// const barHeight = computed(() => size.value * props.data.length + 'px') // 撑开容器内容高度的元素的高度 +// const listTop = computed(() => start.value * size.value + 'px') // 列表向上滚动时要动态改变 top 值 const clelmentHight = ref(); const lefts = ref(""); @@ -50,6 +59,11 @@ const jingSTyle = () => { clelmentHight.value.scrollHeight > clelmentHight.value.clientHeight ? idtswidth + "px" : "0px"; + + size.value = clelmentHight.value.children[0].clientHeight + end.value = Math.ceil(clelmentHight.value.clientHeight / size.value) + shownumber.value = end.value + } }; @@ -58,6 +72,10 @@ const optionsList = ref(props.options.column); const Toores = ref(props.options.column.map((e) => e.title)); const grid = ref(``); +// 判断 +const scrollISHights = computed(() => { + return showData.value.length > props.data.length ? 'scroll' : 'auto' +}) /** * 执行 @@ -75,6 +93,64 @@ const getGrid = (): void => { } } } +nextTick(() => { + // 给页面绑定鼠标滚轮事件,针对火狐的非标准事件 + clelmentHight.value.addEventListener("DOMMouseScroll", handleScroll) + // 给页面绑定鼠标滚轮事件，针对Google，mousewheel非标准事件已被弃用，请使用 wheel事件代替 + clelmentHight.value.addEventListener("wheel", handleScroll) + // ie不支持wheel事件，若一定要兼容，可使用mousewheel + clelmentHight.value.addEventListener("mousewheel", handleScroll) +}) + + +// 容器的滚动事件 +const handleScroll = (events: any) => { + + // 获取容器顶部滚动的尺寸 + // const scrollTop = container.value.scrollTop + // const scrollTop = clelmentHight.value.clientHeight + + var e = events || window.event; + if (e.wheelDelta) { + if (e.wheelDelta > 0) { //当鼠标滚轮向上滚动时 + scrollBootoms() + } + if (e.wheelDelta < 0) { //当鼠标滚轮向下滚动时 + scrollTops() + } + } else if (e.detail) { + if (e.detail < 0) { //当鼠标滚轮向上滚动时 + scrollBootoms() + } + if (e.detail > 0) { //当鼠标滚轮向下滚动时 + scrollTops() + } + } + + function scrollTops(): void { + console.log('向上滚动'); + if (end.value >= props.data.length) { + return + } + // 计算卷去的数据条数，用计算的结果作为获取数据的起始和结束下标 + // 起始的下标就是卷去的数据条数，向下取整 + start.value = start.value + 2 + // 结束的下标就是起始的下标加上要展示的数据条数 + end.value = end.value + 2 + } + function scrollBootoms(): void { + if (end.value < shownumber.value + 2 || start.value < 2) { + return + } + console.log('向下滚动'); + // 计算卷去的数据条数，用计算的结果作为获取数据的起始和结束下标 + // 起始的下标就是卷去的数据条数，向下取整 + start.value = start.value - 2 // 结束的下标就是起始的下标加上要展示的数据条数 + end.value = end.value - 2 + } + + +} const UPdateS = () => { optionsList.value = props.options.column @@ -147,8 +223,9 @@ defineExpose({ -
    -
  • +
    • @@ -212,7 +289,7 @@ defineExpose({ .xinTabel { width: 100%; - overflow-y: auto; + overflow-y: v-bind(scrollISHights); .xing_bg { background: linear-gradient(135deg, #73b0e9 0%, #9ebedb 100%) !important; diff --git a/src/views/modular_package/table/index.vue b/src/views/modular_package/table/index.vue index 42b90ff..135ffbc 100644 --- a/src/views/modular_package/table/index.vue +++ b/src/views/modular_package/table/index.vue @@ -2,12 +2,12 @@
      + }" ids="id" height="70vh">