我正在为我的工程部门研究团队重新设计一个程序,我的应用程序是使用 Electron、Vuex、HTML/Sass/Javascript 构建的。该程序的目的是允许用户创建“步骤”,这些“步骤”是您可以进入并设置系统参数和流程以运行 X 次的项目/图块。在每个步骤中设置值和设置可能需要一段时间,因此如果用户创建了 5 个步骤,并意识到他们想要完全删除第 2 步,则每个步骤中需要有一个“删除”或一个小“x” /物品。目前,我只能使用“pop”函数删除最后一个填充的步骤/项目,以删除数组“stepsGrid”中的最后一个项目。
使用 vue-grid-layout 来填充网格项/图块,它们都是我们系统将运行的“步骤”。我能够动态添加新的“步骤”,但是我只能通过使用 pop() 从网格项所在的数组中删除最后一项来成功删除步骤。我想放置一个
<button id="remove" @click="removeStep()">Remove</button>
在每个步骤中,这样我就可以删除网格上的任何项目,而不仅仅是最后一个项目。
我看过一些例子,但不是最擅长 javascript - 我没有任何运气。我尝试引用此处使用的函数:https ://chrishamm.io/grid-demo/ 和 https://github.com/chrishamm/vue-dynamic-grid 用于删除网格项,但是这个库比这个库要复杂一些常规的 Vue-Grid-Layout。
这是我的代码,关键是 step.i 组件,它是填充的每个项目的 ID,每个图块的角落都有一个“x”,函数需要能够识别该图块的 ID,并删除stepGrid 数组中的相应项:
<h2 style="color: #f6a821;">Steps</h2>
<hr class="hr" />
<grid-layout
:layout.sync="stepsGrid"
:col-num="8"
:row-height="75"
:is-draggable="true"
:is-resizable="false"
:is-mirrored="false"
:vertical-compact="true"
:margin="[50, 50]"
:use-css-transforms="true">
<grid-item
v-for="step in stepsGrid" :key= "step.i"
:x="step.x"
:y="step.y"
:w="step.w"
:h="step.h"
:i="step.i"
:isDraggable="step.isDraggable">
<div class="Panel__name">Step: {{step.i}} //displays item # on each tile
<div class="Panel__stepcount"> Loop Count: <input type="number" value="1">
</div>
</div>
<div class="editButton">
<div class="Panel__status">Status:</div>
<button @click="removeStep()">Remove</button>
</grid-item>
</grid-layout>
//网格数组在store.js中,如下图(这是一个电子应用程序):
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
stepsGrid : [
{"x":0,"y":0,"w":2,"h":1,"i":"0"}
],
mutations: {
addStep (state, step){
state.stepsGrid.push(step);
}
},
actions: {
addStep ({state, commit}){
const step =
{"x":0, "y": 1, "w": 2,"h":1,"i":String(state.stepsGrid.length) };
commit('addStep', step);
},
我知道我需要在这里合并使用密钥,但我不确定该怎么做。我发现了这个,但他以一种不同寻常的方式去做:
“我通过按钮删除了数组中的元素,但无法理解问题所在,因为最后一个元素总是被删除,尽管键是唯一的。我添加了一个额外的唯一 uuid,一切正常。”
<dish-item v-else class="dishItem"
v-for="(item, key) in dishes" :key="key + $uuid.v1()" :value="item"
@removeDish="$delete(dishes, key)"
@editDish="$refs.modal.showEdit({item, key})"
/>
最后,我浏览了 Vue-Dynamic-Grid 的文件,发现他们正在使用以下方法删除项目:
methods: {
removeElement(item) {
if (item == this.selectedItem) {
this.selectElement(null);
}
this.gridItems.splice(item.i, 1);
this.items.splice(item.i, 1);
breakpoints.forEach(function(size) {
this.layouts[size].splice(item.i, 1);
this.layouts[size].forEach(function(layout, i) {
if (layout.i > item.i) {
layout.i--;
}
});
}, this);
this.$emit("itemRemoved", item);
}
如果有人可以提供帮助,我将不胜感激!我一直在通过这个项目学习 JS,所以如果有人有一些提示,请告诉我!谢谢
我曾尝试尝试根据 Vue-Dynamic-Layout 删除项目的方法编写一个函数,但没有成功。截至目前,我在每个图块中都没有一个小“x”,我在应用程序的左下方有一个用于添加/删除步骤的按钮,要删除项目,我只是将最后一个项目弹出stepsGrid 数组,所以我只能删除最后一个填充的项目。