Question

我正在尝试向Bootstrap-Vue表添加一些Ctrl +单击功能，以便选择多行。为了检查它的行为是否正确，我在页面上和控制台上打印了一些调试信息。

 <a href="{{ route('choose_table',$table_name = $data->name)}}" class="btn btn-primary" >
     {{$data->name }}
</a>

Route::get('{table_name}', 'Apps\SetupController@index')->name('choose_table');

这可以很好地工作，但是当我删除模板中的调试行时，该表不再在视觉上进行更新，并且即使控制台日志表明仍正确选择了行，_rowVariant似乎也没有作用。

编辑：这是一个小提琴：https://jsfiddle.net/aznan/24enw63a/39/

Answer 1

奇怪！如果您设置了小提琴或plnk，我可以更好地回答。但这仍然可能是由于滞后。

尝试用setTimeout包装函数，例如

    rowClick(item, index, event) {
       setTimeout(function(){
          if(!event.ctrlKey) {
            this.selected.forEach(selectedItem => selectedItem._rowVariant = null);
            this.selected = [];
          }
          if(event.ctrlKey && this.selected.includes(item)) {
            item._rowVariant = null;
            this.selected = this.selected.filter(selectedItem => selectedItem !== item);
          } else {
            item._rowVariant = 'info';
            this.selected.push(item);
          }
        });
      }

除非打印调试信息，否则Bootstrap-Vue表不会更新

1 个答案: