VUEJS - 按下按钮时附加 <tr> 元素

问题描述

我的 Vuejs 项目中有一张表，类似于我在上面分享的截图。

我的问题是；当为每一行按下 <tr> 按钮时，如何从表中删除 Delete 元素？

另一方面，我希望表格右上角的 Add 按钮也能正常工作。当我单击 Add 按钮时，我希望在表格底部创建另一个 <tr> 元素。但是，此元素上应该有输入字段，用户可以在其中输入每列的信息。用户在每列中写入信息后，应将该行添加到表中。我该怎么做？

解决方法

如果我是对的，您正在使用 v-for 循环来呈现所有 <tr>s

然后使用带有索引的 v-for 像 v-for="(obj,index) in objects" 来获取索引

使用 Array.prototype.push() 添加空行，例如objects.push({x: null,y: null})

删除使用 Array.prototype.splice() 例如 objects.splice(index,1)

只需将这些功能分配给相应的按钮即可。

您可以尝试使用组件中的数据属性，然后实现两个方法：deleteRow 和 addRow。

这可能是一个示例代码


data() {
  return {
    dataTable: [
      {
        id: 1,code: code1,description: description1,},{
        id: 2,code: code2,description: description3,...
    ]
  }
}
methods: {
  deleteRow(id) {
    this.dataTable = this.dataTable.splice(
      this.dataTable.findIndex(item => item.id === id)
    )
  }
  addRow(newRow) {
    // newRow = {id: 3,code: code3,description: description3}
    this.dataTable = [...this.dataTable,newRow]
  }
},

您的组件将由 Vue.js 反应系统更新。

可能应该从模态组件调用 addRow 方法，您可以在其中放置输入字段以设置 newRow。

appendchild datatable datatable vue.js