VueJS’te shift tuşu ile çoklu seçim yapma

Bir tablomuz var, kullanıcının tıkladığı satırı seçildi yapmak istiyoruz, dahası seçimden sonra birkaç satır aşağısında başka bir satıra Shift tuşu ile birlikte tıkladığında bu ikisinin arasındaki tüm satırları seçildi yapmak istiyoruz.

Verimizi oluşturalım.

const movies = reactive([
   {
      name: 'Escaping from Yourself',
      director: 'Safa Gayret',
      releaseDate: '2018',
      selected: false,
   },
   {
      name: 'Once Upon a Time in Anatolia',
      director: 'Nuri Bilge Ceylan',
      releaseDate: '2011',
      selected: false,
   },
   {
      name: 'The Secret in Their Eyes',
      director: 'Juan José Campanella',
      releaseDate: '2009',
      selected: false,
   },
   {
      name: 'Heartbreaker',
      director: 'Pascal Chaumeil',
      releaseDate: '2010',
      selected: false,
   }
])

Bu verileri bir tabloda gösterelim, satırların click event’ine selectItem fonksiyonumuzu atayalım.

<table>
   <thead>
     <th>Movie name</th>
     <th>Director</th>
     <th>Release date</th>
   </thead>
   <tbody>
     <tr v-for="movie in movies" :key="movie.name"
         @click="selectItem($event, movie)">
       <td>{{movie.name}}</td>
       <td>{{movie.director}}</td>
       <td>{{movie.releaseDate}}</td>
     </tr>
   </tbody>
</table>

Yanında $event ile ilgili satırdaki objeyi taşıyan selectItem fonksiyonumuzu yazalım.

const selectItem = (e, item) => {
// Kullanıcı Shift tuşuna basmış mı kontrol edelim
// Bastıysa daha önceden seçilmiş bir satır var mı,
// Bir satır varsa seçtiği ikinci satırı da selectedItems array'imizde tutalım.
// indexOf ile bu iki seçimin movies adlı array'deki konumlarını bulalım.
// Bu iki seçim ve aralarında kalanları selectedItems array'imize push edelim.
// Son olarak selected bilgilerini true yapalım.
// İlk seçimde Shift tuşuna basmayacağı ihtimalini de düşünerek else blocku yazalım.
      if (e.shiftKey) {
        if(selectedItems.length === 1) {
          selectedItems.push(item)
          let firstIndex = movies.indexOf(selectedItems[0])
          let lastIndex = movies.indexOf(selectedItems[1])
          selectedItems = []
          movies.forEach((item, index) => {
            if (index >= firstIndex && index <= lastIndex) {
              selectedItems.push(item)
              item.selected = true
            }
          })
        } else {
          selectedItems = []
        }
        
      } else {
        if (selectedItems.includes(item)) {
          selectedItems.splice(selectedItems.indexOf(item), 1)
          item.selected = false
        } else {
          selectedItems.push(item)
          item.selected = true
        }
      }
}

Hepsi bu kadar. Demo aşağıdadır.