Блог

Главная - Вопросы по программированию - VueJS : Прокрутка до строки таблицы при загрузке

VueJS : Прокрутка до строки таблицы при загрузке

#vue.js #scroll #element #ref

#vue.js #прокрутите #элемент #ссылка

Вопрос:

У меня есть таблица (из element framework) со списком вопросов внутри. Я могу выбрать один из них для изменения, выполнить свои действия, и после проверки я бы хотел, чтобы страница перешла к измененному вопросу.

 <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();

Я отправляю идентификатор в качестве параметра в своем URL-адресе и получаю его на своей странице списка просто отлично. Но с

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

Идентификатор вопроса в порядке, но остальное не определено.

Если я попытаюсь войти this.refs , я получу что-то подобное

Как я могу заставить это работать?

Решения, которые я пробовал :

  • Добавляя: this.$refs[this.$route.params.questionId].scrollIntoView() в mounted раздел. , я получаю TypeError: "_this.$refs[_this.$route.params.questionId] is undefined"
  • Добавление идентификатора вопроса вручную, например this.$refs(questionId).scrollIntoView() , та же ошибка
  • Делаю консоль.журнал this.$route.params.questionId и this.$refs , я действительно получаю QuestionID и ссылки
  • Пробовал (все еще смонтирован) :
 this.$nextTick(() => {
      this.$refs[this.$route.params.questionId].scrollIntoView()
});

все еще не определено

Редактировать : Добавлен скриншот журнала

Комментарии:

1. Кроме того, если я попытаюсь console.log(this.$refs) , я, кажется, получу список со всей информацией, я просто не знаю, как получить к нему доступ

2. Можете ли вы поделиться некоторыми примерами этого вывода ( this.$refs ).

3. @User28 добавил картинку в редактирование, это только для одного вопроса

4. Затем вы должны сделать что-то вроде this.$refs[this.$route.params.questionId].scrollIntoView() .

5. Я добавил эту строку в свою mounted часть, теперь у меня есть эта ошибка : Unhandled promise rejection TypeError: "_this.$refs[_this.$route.params.questionId] is undefined"

Ответ №1:

Я понял, в чем была проблема.

Я пытался сделать это в mounted разделе, но, похоже, страница не была отрисована и поэтому this.$refs[this.$route.params.questionId].scrollIntoView() не могла работать (таким образом undefined , результаты, которые я получил)

Решение :

В той <script> части, которую я добавил

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

что происходит после завершения монтажа детали, как показано на этой странице.

ПРЕДУПРЕЖДЕНИЕ

Update активируется всякий раз, когда вы выполняете какое-либо действие, например, щелкаете по текстовому вводу (как в моем случае). Я исправил это, используя логическое значение в data разделе (обновил приведенный выше код, чтобы он соответствовал решению).

Метки: