1

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

<template>
  <div>
    <b-table striped hover :fields="fields" :items="items" @row-clicked="rowClick"></b-table>
    Debug selected: {{selected.map(item => item.name).join(', ')}}
  </div>
</template>

<script>
export default {
  name: 'Table',
  data () {
    return {
      fields: [
        {key: 'id'},
        {key: 'name'}
      ],
      items: [
        {id: '1', name: 'Row 1'},
        {id: '2', name: 'Row 2'},
        {id: '3', name: 'Row 3'},
        {id: '4', name: 'Row 4'},
        {id: '5', name: 'Row 5'}
      ],
      selected: []
    }
  },
  methods: {
    rowClick(item, index, event) {
      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);
      }
      console.log('Debug selected: ' + this.selected.map(item => item.name).join(', '));
    }
  }
}
</script>

这工作正常，但是当我删除模板中的调试行时，表不再在视觉上更新，并且似乎 _rowVariant 没有效果，即使控制台日志表明行仍然被正确选择。

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

4

1 回答 1

0

奇怪的！如果您有小提琴或 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);
          }
        });
      }
于 2018-07-13T16:18:30.773 回答