我有一个用Vue编写的页面,其中有一个包含3列的表格,如下所示:
https://i.stack.imgur.com/Ox7gn.png
每列都是一个完整的实体,每一行都是实体的属性。
在每列的底部,每列都有一组按钮。
我想要做的是在点击按钮时将一些额外的属性(字符串)附加到实体的多个属性,如下所示:
https://i.stack.imgur.com/lnUzt.png
当点击另一个按钮时,会附加更多字符串。
再次单击按钮时,将删除相应的属性。例如,如果单击第二个图像中的“a”按钮,表格将恢复为第一个图像。
由于有很多属性(大约10个),我不想将所有字符串硬编码为每个属性下的div,并使用v-show / v-if有条件地渲染它们。
我还考虑过存储多个活动按钮的数组,并在单击任何按钮时重新渲染整个表。 (必须重新渲染整个表的原因是因为每个单独的行都使用for循环进行渲染,所以我不能只修改一行中的单个元素。)但这似乎不太自然,我相信应该有一个更好的解决方案。
有没有好方法呢?