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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4bb20-44397.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4bb20-44397.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?