VueJS：加载时滚动到 table 行

Question

我有一个table（来自元素框架），里面有一个问题列表。我可以选择一个来修改，做我的事情，一旦我验证，我希望页面滚动到修改后的问题。

<template>
    <div>
        <el-table :data="list">
            <el-table-column :label="$t('label')" width="300">
                <template slot-scope="scope">
                    <span :ref="list[scope.$index].id">{{ list[scope.$index].label }}</span>
                </template>
            </el-table-column>

以下是我如何管理每个问题的参考，因此它是唯一的

在我的 <script> 部分： document.getElementById(this.$route.params.questionId).scrollIntoView();

我将 id 作为参数发送到我的 url 中，然后在我的列表页面中获取它就好了。但是

console.log("Id : ", this.$route.params.questionId, this.$refs[this.$route.params.questionId])
document.getElementById(this.$route.params.questionId).scrollIntoView();

questionId没问题，其他未定义

如果我尝试记录 this.refs，我会得到一些东西 like that

我怎样才能让它工作？

我试过的解决方案：

添加：this.$refs[this.$route.params.questionId].scrollIntoView() 到 mounted 部分。 , 我得到 TypeError: "_this.$refs[_this.$route.params.questionId] is undefined"
像this.$refs(questionId).scrollIntoView()一样手动添加questionId，同样的错误
做 this.$route.params.questionId 和 this.$refs 的 console.log ，我确实得到了 questionId 和 refs
已尝试（仍在安装中）：

this.$nextTick(() => {
      this.$refs[this.$route.params.questionId].scrollIntoView()
});

仍未定义

编辑：添加了日志截图

Answer 1

我知道问题出在哪里了。

我试图在 mounted 部分执行此操作，但似乎页面未呈现，因此 this.$refs[this.$route.params.questionId].scrollIntoView() 无法工作（因此我得到了 undefined 结果）

解决方案：

在<script>部分，我添加了

updated() {
    if(this.scrollOnLoad && this.$route.params.questionId){
        this.scroll();
        this.scrollOnLoad = false;
    }
},

一旦安装部分结束，就会发生这种情况，如本 page 所示。

警告

Update 将在您执行操作时激活，例如单击 TextInput（如我的情况）。我通过在 data 部分使用布尔值来解决这个问题（更新上面的代码以匹配解决方案）

VueJS：加载时滚动到 table 行

VueJS : Scroll to line of a table on load

scroll

element

ref

vue.js

警告