데이터 표시 가능한 여러 행 선택(Shift+Click)

데이터 표시 가능한 여러 행 선택(Shift+Click)

Vuetify 1.5.x의 Datatable을 사용하고 있습니다.

체크박스를 활성화하여 여러 행을 선택할 수 있도록 하고, Gmail과 동일하게 각 체크박스를 클릭하지 않아도 되도록 Shift + Click으로 선택할 수 있도록 하고 싶습니다.

정렬에 따라 달라지는 행 ID가 있거나 데이터 테이블을 정렬할 때 행 배열 순서를 변경하는 것은 어렵지 않습니다.하지만 이것들 중 어느 것도 효과가 없는 것 같다.

vuetify datable로 이 일을 해낸 사람이 있나요?

    <template v-slot:items="props">
        <tr :active="props.selected" @click="selectRow(props);">
            <td>
                <v-layout>
                    <v-flex>
                        <v-checkbox
                            :input-value="props.selected"
                            primary
                            hide-details
                            :class="{ 'red--text': props.item.was_modified_recently == 1 }"
                        ></v-checkbox>
                    </v-flex>
               </td>
          </tr>
     </template>

Vuetify 문서 예시

사실 오늘 이 문제를 해결해야 했어요.

솔루션에서는,item-selected벌크 선택을 실행하는 후크 및 메서드.

methods: {
  bulkSelect({ item: b, value }) {
      const { selectedRows, current, shiftKeyOn } = this;

      if (selectedRows.length == 1 && value == true && shiftKeyOn) {
        const [a] = selectedRows;
        let start = current.findIndex((item) => item == a);
        let end = current.findIndex((item) => item == b);
        if (start - end > 0) {
          let temp = start;
          start = end;
          end = temp;
        }
        for (let i = start; i <= end; i++) {
          selectedRows.push(current[i]);
        }
      }
    },
}

그래서 그게 핵심이군요.또한 시프트가 눌려 있는 경우를 추적하고, 시프트를 누른 상태에서 두 번째 행을 클릭할 때 브라우저가 표의 텍스트를 강조 표시하지 않도록 하는 등의 세부 사항도 있습니다.

이 기능을 나타내는 코데펜을 만들었습니다.

https://codepen.io/ryancwynar/pen/jOWoXZw

새로운 버전의 vuetify, 즉 2.0에서는 질문이 다음과 같이 쉽게 해결됩니다.

아래의 스택 오버플로우 질문 링크에 답변을 입력했습니다.

Vuetify 추가prepend-item"select all"을 추가할 수 있는 항목을 나열하기 전에 커스텀 항목을 추가할 수 있는 슬롯

모든 체크박스를 선택하려면 phate-item의 codepen 예제를 확인하십시오.

네가 맡은 것과 같은 사건을 맡았어

1. 첫 번째로, 다른 이벤트(키보드 이벤트)를<tr>태그 붙이고 소품 넘겨주기.
2. 그리고 나서slice선택한 항목의 정해진 범위에 대한 항목 배열로 이동합니다.

제 경우 선택한 어레이를 vuex 스토어에 저장했습니다.내가 도울 수 있기를 바란다;)

<template v-slot:items="props">
            <tr :active="props.selected" @click.shift="useShift(props)" @click="selectRow(props)">
                <td>
                    <v-layout>
                        <v-flex>
                            <v-checkbox
                                :input-value="props.selected"
                                primary
                                hide-details
                                :class="{ 'red--text': props.item.was_modified_recently == 1 }"
                            ></v-checkbox>
                        </v-flex>
                   </td>
              </tr>
         </template>


    export default {
       methods:{
          ...mapMutations(["setSelected"]),
          useShift({ index }) {
           this.setSelected(
            this.items.slice(
              this.items.findIndex(el => {
                return this.selected.find(v => v.track.id == el.track.id);
              }),
              index
            )
          );
        },
       }
    }      

언급URL : https://stackoverflow.com/questions/58032158/datatable-vuetify-select-multiple-rows-shiftclick