javascript - 如何在 VueJS 中获得多个 td 选择
问题描述
我在表格行中输出日历。每个 td 都是一天。执行此操作后，我需要打开一个表单：单击一个 td，将光标向左或向右移动，单击另一个 td。我必须打开我的表单并根据选定的单元格插入 start_date 和 end_date。
我认为一旦我点击第一个单元格，我必须创建一个函数，为我悬停的每个 td 添加一个“选定”类，然后在第二次点击时，我必须获取所有具有“选定”类的单元格。
你怎么看？
解决方案
让我建议两种解决任务的方法：
- 使用 Vuetify 及其日期和时间选择器。
- 从头开始写作。
现在，让我们谈谈第二个。您的日历是一个二维矩阵（二维数组），每个单元格都有自己唯一的索引x或[x,y]坐标。当用户选择第一个td-cell 和第二个时，您只需从最小索引循环到最大索引并将selected类添加到td-cells。
假设这是您的日历：
(1)(2)(3)
(4)(5)(6)
(7)(8)(9)
如果用户选择(4)并且(8)您只需要从第 4 个索引循环到第 8 个索引并添加selected类。另一方面，如果用户选择(8)并且(4)您只需要交换它们并从最小值循环到最大值添加到每个td-cellselected类。