如何在VueJS中获得多个td选择

时间:2019-01-15 19:10:58

标签: javascript vue.js vuejs2

我在表格行中输出日历。每一天都是一天。执行此操作后,我需要打开一个表单: 单击一个td,向左或向右移动光标,单击另一个td。 我必须打开表单,然后根据所选单元格插入start_date和end_date。

我认为,一旦我单击第一个单元格,就必须创建一个函数,将一个“ selected”类添加到所悬停的每个td上,然后再次单击,就必须获取所有具有“ selected”类的单元格。 / p>

你怎么看?

1 个答案:

答案 0 :(得分:0)

让我提出两种解决任务的方法:

  1. 使用Vuetify及其date and time pickers
  2. 从头开始写作。

现在,让我们谈谈第二个。您的日历是2D矩阵(2d数组),每个单元格都有自己的唯一索引[x,y]td坐标。当用户选择第一个selected单元格时,您只需要从最小索引到最大索引循环,并将td类添加到(1)(2)(3) (4)(5)(6) (7)(8)(9) 单元格即可。

假设这是您的日历:

(4)

如果用户选择了(8)selected,则只需从第4个索引循环到第8个索引并添加(8)类。另一方面,如果用户选择(4)而不是td,则只需交换它们,并从最小值到最大值循环到每个selected单元格let userInfo; socket.on('login', (data) => { userInfo = data; console.log(userInfo); // {username: 'testusername'} }); socket.on('lobby-left', (userInfoParam) => { console.log(userInfo); // { } }); 类中