How vue3 makes table content scroll seamlessly (another bunch of redundant code)

backdrop

In addition to various echarts charts and map displays, several tables are currently being developed for visualization on large screens. Now comes the need to set all the tables in the large screen to scroll seamlessly. In line with the programmer's seven deadly SINS principle, the first time to evade a bit, but did not evade success.

• After a simple search on the Internet, there are two solutions that are suitable for our project. The first one is to use a plug-in vue3-seamless-scroll
• The second solution is to write JS code through the timer to control the table scroll bar automatic scrolling

Option one

From the actual development of consideration to use if there is a similar function out of the box no problem plug-in is of course the best, can improve a lot of work efficiency to achieve the purpose of getting off work on time

vue3-seamless-scroll

(Click to enter official document)

According to the plug-in description, the current component supports seamless scrolling up and down, left and right, single-step scrolling, and seamless scrolling of complex ICONS, and the supporting platform is the same as that of Vue3.0.

Install

npm npm install vue3-seamless-scroll --save yarn yarn add vue3-seamless-scroll browser <script SRC = "https://unpkg.com/browse/vue3-seamless-scroll@1.0.2/dist/vue3-seamless-scroll.min.js" > < / script >

disposition

• list

Seamless scrolling of list data, list length used internally by components. type: Array required: true

• v-model

Control animation scrolling and stopping with v-model. Start scrolling by default. type: Boolean default: true required: false

• direction

Control scrolling direction. Optional value up, down, left, right type: String default: "up" required: false

• isWatch

Enable data update listening. type: Boolean, default: true, required: false

• hover

Whether mouse hover is enabled type: Boolean default: false required: false

• count

Number of animation cycles. The default is infinite. type: Number default: "infinite" required: false

• limitScrollNum

The amount of data to enable scrolling. Only the length of the list is greater than or equal to the value. type: Number, default: 5, required: false

• step

Step speed type: Number, required: false

• singleHeight

Height of single step stop type: Number, default: 0, required: false

• singleWidth

The width of the single step motion stop type: Number, default: 0, required: false

• singleWaitTime

Single stop wait time (default: 1000ms) type: Number, default: 1000, required: false

• isRemUnit

singleHeight and singleWidth Whether rem metric is enabled type: Boolean default: true required: false

• delay

Animation delay type: Number, default: 0, required: false

• ease

For an animation effect, you can pass in a bezier curve value type: String | cubic-bezier, default: "ease-in", required: false

• copyNum

Copy the list times, the default copy once, when the parent height is greater than twice the height of the list rendering can be controlled by this parameter to achieve seamless scrolling effect. type: Number default: 1 required: false

• wheel

Whether to enable scroll wheel scrolling when mouse hover is enabled. type: boolean default: false required: false

• singleLine

Enable single horizontal scrolling type: boolean default: false required: false

Use

1. Register components

• Global registration

// **main.js**
import { createApp } from 'vue';
import App from './App.vue';
import vue3SeamlessScroll from "vue3-seamless-scroll";
const app = createApp(App);
app.use(vue3SeamlessScroll);
app.mount('#app');

• Single file registration

<script>
  import { defineComponent } from "vue";
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
   export default defineComponent({
      components: {
        Vue3SeamlessScroll
      }
   })
</script>

2. Use components

We need to scroll the table content here. Wrapping the table directly with components will make the table header roll away, so there is a small change in the use of the table code need to copy the table code again. The first code modifies the css code to hide the body part of the table, and the second code uses components to wrap and hide the table header part.

<template> <div class="container"> <el-table class="top-table" :data="tableData" border style="width: 100%;" > <el-table-column prop="type" label=" type" width="120" /> <el-table-column prop="name" label=" name" /> <el-table-column prop="content" label=" content" /> </el-table> <vue3-seamless-scroll class="seamless" :list="tableData" :hover="true" :step="0.4" :wheel="true" :isWatch="true"> <el-table class="bottom-table" :data="tableData" border style="width: 100%;" > <el-table-column prop="type" label=" type" width="120" /> <el-table-column prop="name" label=" name" /> <el-table-column prop="content" label=" content" /> </el-table> </vue3-seamless-scroll> </div> </template> <script lang="ts" setup> import { ref } from 'vue' const tableData: any = ref([]) const getData = () => { for (let i = 0; i < 6; i++) {tableData.value.push({type: 'Home cooking ${i + 1}', name: 'Eggplant scrambled eggs ${i + 1}', content: ${i + 1} '})}} getData() </script> <style scoped>.container {width: 500px; height: 300px; } .seamless { width: 100%; height: 220px; overflow: hidden; } :deep .top-table .el-table__body-wrapper { display: none; } :deep .bottom-table .el-table__header-wrapper { display: none; width: 100%; } </style>

In this way, the effect is not OK, but there are still problems. In the above example, we only created 6 pieces of data, but in fact, there are about 50 pieces of data on a single page of the table in our project, so change it to 50 pieces of data to see the effect

This plug-in has made some changes to it for table content scrolling, and now we need to make more changes to achieve the effect we want, which can not be used directly out of the box for our current needs. Here I will give up this solution directly, and how to achieve the effect we want will be looked at later when I have time. At present, it is still focused on work efficiency. Of course, if any of you have done your research, you are welcome to text me, no reward just want to see.

Option two

The second solution is to directly operate the scroll bar and set a timer to let it roll by itself, which is the basic skills of the relatively simple front end

Train of thought

We only need to declare a timer, obtain the scrollHeight of the scroll area after obtaining the table data, and automatically scroll the scroll bar by modifying the scrollTop in the timer

It's very fast and we'll see what happens when we're done with the code

My code

<template> <div class="container"> <el-table ref="tableRef" :data="tableData" border style="width: 100%; height: 100%;" > <el-table-column prop="type" label=" type" width="120" /> <el-table-column prop="name" label=" name" /> <el-table-column prop="content" label=" content" /> </el-table> </div> </template> <script setup> import {ref, onMounted, onUnmounted } from 'vue' let timer = null; let tableRef = ref(null); const scroll = () => {// Clear the previous timer before executing a new timer if (timer) clearInterval(timer); let status = true; / / get form rolling area of dom const scrollDom = tableRef. Value. $refs. BodyWrapper. GetElementsByClassName (" el - scrollbar__wrap ") [0]. / / the mouse moved to increase to monitor events. Stop rolling scrollDom addEventListener (' mouseover, () = > {status = false; }); Remove recovery / / mouse scroll scrollDom. AddEventListener (' mouseout '() = > {status = true; }); timer = setInterval(() => {if (status) {// Set the number of pixels scrollDom.scrollTop += 40; // Modify scrollTop back to the top when scrolling to the bottom if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1) { scrollDom.scrollTop = 0; }}}, 1000); } const tableData = ref([]) const getData = () => { for (let i = 0; i < 50; i++) {tableData.value.push({type: 'Home cooking ${i + 1}', name: 'Eggplant scrambled eggs ${i + 1}', content: 'Love key ruthless key ${i + 1}'})} // To get the scroll area of the table after the data are loaded and rendered dom setTimeout(() => {scroll()}, 1000)} onMounted(() => {getData()}) onUnmounted(() => {// if (timer) clearInterval(timer); timer = null; }) </script> <style scoped> .container { width: 500px; height: 310px; } </style>

ending

Finally, the finished code is wrapped up and invoked everywhere to avoid redundant code.

This article on vue3 how to achieve seamless scrolling table content is introduced to this, more related to vue3 table content seamless scrolling content please search the script home previous articles or continue to browse the following related articles hope that you will support the script home in the future!

Latest comments