Как получить множественный выбор td в VueJS

Question

Я вывожу календарь в строку таблицы. Каждый тд это один день. Мне нужно открыть форму после выполнения этой операции: нажмите на один тд, переместите курсор влево или вправо, нажмите на другой тд. Я должен открыть свою форму и вставить start_date и end_date в соответствии с выбранной ячейкой.

Я думаю, что после того, как я нажму на первую ячейку, мне нужно создать функцию, которая добавит класс «selected» к каждому зависанию td, а затем при втором щелчке я получу все ячейки с классом «selected».

Что ты думаешь?

Answer 1

Позвольте мне предложить два способа решения вашей задачи:

1. Используйте Vuetify и его средства выбора даты и времени .
2. Пишу с нуля.

Теперь поговорим о втором. Ваш календарь представляет собой 2D матрицу (2d массив), каждая ячейка имеет свой уникальный индекс x или [x,y] координаты. Когда пользователь выбирает первый td -элемент, а второй - просто нужно перейти от минимального индекса к максимальному индексу и добавить класс selected к td -элементам.

Предположим, что это ваш календарь:

(1)(2)(3)
(4)(5)(6)
(7)(8)(9)

Если пользователь выбрал (4) и (8), вам просто нужно перейти от 4-го индекса к 8-му и добавить класс selected. С другой стороны, если пользователь выбирает (8), а затем (4), вам просто нужно поменять их местами и перейти от минимального значения к максимальному добавлению к каждому td -cell selected классу.