Element ui table scrollTop scrolls to the beginning or end of a line

the scroll bar scrolls to the corresponding line header or end question after element ui table adds data rows

scroll to the first line:
this.$refs.table.bodyWrapper.scrollTop = 0;
scroll to the last line:
this.$refs.table.bodyWrapper.scrollTop = this.$refs.table.bodyWrapper.scrollHeight;

I saw the above solution on the Internet, but I tried it myself and found that it didn"t work. What"s the reason?

-- dividing line-

follow-up progress:
I will change it to

this.$nextTick(() => {
  let scrollHeight = this.$refs.table.bodyWrapper.scrollHeight
  this.$refs.table.bodyWrapper.scrollTop = scrollHeight
})

can be set successfully, but always scroll to a place close to the bottom.
I checked that the bodyWrapper.scrollHeight is equal to 1256 and maxmax height is 659, so generally setting it to 1256-659 to 597 will ensure that the scroll bar scrolls to the bottom, but after I set it up, the printed bodyWrapper.scrollTop is 567, so it always scrolls a little closer to the bottom, why?

Aug.29,2021

has not been used, it depends on how you write it:

    1.<el-table ref="table">  // ref
    2. this.$refs.table.bodyWrapper.scrollTop  //  this.$refs.table<el-table>

see if this helps you portal

Menu