How does the paging component of vue+elemrnt ui return to the top of the table when turning pages? - Codes Helper - Programming Question Answer

How does the paging component of vue+elemrnt ui return to the top of the table when turning pages?

how does the paging component of vue+elemrnt ui return to the top of the table when turning pages

related codes

  <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                 :current-page.sync="listQuery.page"
                 :page-sizes="[20, 50, 100, 200]" :page-size="listQuery.limit"
                 layout="total, sizes, prev, pager, next, jumper" :total="cptInfoTotal">
  </el-pagination>

problem description

after clicking on the next page, or after clicking on a few pages, the table is now turned to the bottom, and after turning the page, it is still at the bottom. How to make the table show the top

after turning the page?

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

topic description

sources of topics and their own ideas

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Javascript element-ui vue.js

Oct.21,2021

when you click, just find the element you want to roll to the top scrollTop=0 .

function scrollTop(selector) {
    let element = selector && document.querySelector(selector) || window;
    element.scrollTo(0, 0);
}

scrollTop("-sharptable");

scrollTop();

when loading the table, leave the table data empty first, this.tableData = [].
but the downside of writing this way is that the page flashes a little.

in theory, the table and the page number should be on the same page. There should be no scroll bars. You should make the form and page number just fill the page

.

Previous: Edge browser mouse wheel cannot scroll the scroll bar

Next: Salt-cp Times wrong UnicodeDecodeError

Element-ui card header style is invalid under scoped
I want to change the style of the head of the card and find that it affects the cards on other pages. then I added scoped, , but the modified style is invalid. How to change the configuration ? .el-card__header { background-color: -sharp999999; ...

Css javascript element-ui vue.js

Mar.01,2021
VUE ElementUI Table fixed custom trailing line
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="" width="180"> < el-table-column>...

Table javascript element-ui vue.js

Mar.04,2021
The form check about the logical relation of concatenation in element-ui
the specific UI is shown as follows: : ...

Javascript element-ui vue.js

Mar.05,2021
Visible.sync, what does that mean?
There is such a sentence on elementui, which is not explained by looking up the data. What is this? ...

Javascript element-ui vue.js

Mar.20,2021
The element Ui paging size-change event triggers the current-change event at the same time, resulting in two calls to the interface
element Ui paging size-change event triggers also initiates current-change event, resulting in two calls to the interface <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page....

Html javascript element-ui vue.js

Mar.21,2021
The problem with the Element UI paging method call, why not execute the method written in @ size-change?
because I have multiple data lists on my page, I integrate the corresponding data methods into one method, and then return the methods in the integration method. The code goes like this: script template usecaseMetheds().pageSizeChange : 1 limi...

Javascript element-ui vue.js

Mar.21,2021
How to verify whether the user has submitted or not when the elementUI upload component clicks submit?
how to verify that it has been uploaded after clicking the submit button? ...

Javascript element-ui vue.js

Mar.21,2021
How does vue stop bubbling events?
<el-checkbox style="width: 100%;height: 45px" v-for="(element,index) in formThead" :key="index" :label="element.value" @change="test1()"> <el-slider v-model=&...

Javascript element-ui vue.js

Apr.07,2021
The table setting in element dialong is checked by default
1. Click the button to pop up a dialog and request the data to be displayed by table. There is a table and paging function in dialog. When dialog is opened, the check box in table is selected by default. I did this, but there was no response. butto...

Javascript element-ui vue.js

Apr.23,2021
How does a form form in vue receive data and return it to the backend at the same time
is similar to such a form. The product name and product model in the first row need to be fetched from the backend, but all the data filled in the table should be returned to the backend interface. How to bind the value in el-from. suppose the code ...

Javascript element-ui vue.js

May.31,2021
Element switch how to write the effect when one of the items is selected and the others are changed to unselected?
I would like to ask if one of the switch sliders is true, and the other sliders are all changed into false. Only one item can be selected . ...

Javascript element-ui vue.js

Jun.01,2021
I'd like to ask how to adjust some small styles of vue element el-table.
the vue project uses the element framework, uses the el-table component, modifies the css style, and the local release style appears normally, but the CSS has not been modified since it was published to IIS. use this method to modify the style of el-t...

Javascript element-ui vue.js

Jun.16,2021
Encapsulated the prompt box of Elementui and reported an error
this is an example given by the official of ele.me: this.$alert( , , { confirmButtonText: , callback: action => { this.$message({ type: info , message: `action: ${ action }` ...

Html5 html javascript element-ui vue.js

Jun.25,2021
When vue uses elementUI, to customize the scroll bar, there is a gap between the table fixed column and the scroll bar, how to solve it?
when vue uses elementUI, to customize the scroll bar, there is a gap between the table fixed column and the scroll bar. just started to directly override the "el-table__fixed " attribute of table to remove the gap, but the interface is dynamically adap...

Html javascript element-ui vue.js

Jul.06,2021
What do you mean by this.$emit ('input',this.val); in vue?
because of its high repeatability, it is now packaged into a component, Baidu Sub-component: <template> <div> <div class="group"> <label>{{title}}< label> <input type=&...

Css html5 javascript element-ui vue.js

Jan.17,2022
Vue, I pass a number, and I receive string?.
write a component by yourself, which is passed to the subcomponent as number, but the result subcomponent receives stringtype . parent component: <cmsProgress num=40>< cmsProgress> Sub-component: <el-progress :text-inside="true&...

Html5 javascript element-ui vue.js

Feb.06,2022
El-tree in elementui, data echo problem
when the el-tree related array is returned in the background, the submenus are not all selected, but as long as the id of the parent menu is in the array, then his submenus are all selected method used this.$axios.get( menu queryMenuIdList?roleI...

Javascript element-ui vue.js

Feb.18,2022
The vue child component passes values to the parent component
element-ui : : what is the reason for this? ...

Html5 javascript element-ui vue.js

Mar.04,2022
Echarts + vue static data is normal, the data obtained by Ajax can not be displayed?
enter the interface below: : :mounted : load data in the created lifecycle created:function(){ this.load_leftTop(); } ...

Html5 javascript element-ui vue.js echarts

Mar.13,2022
Background permission settin
_this.arrTitle = []; var listTitle = data.data; arrTitle html for (let i in listTitle) { _this.arrTitle.push(listTitle[i]); } 1.vue builds the project, selects permissions and creates roles in the background...

Jquery javascript element-ui vue.js

Mar.21,2022

Menu