element-plus el-table、动态添加、删除行、input输入框-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-plus el-table、动态添加、删除行、input输入框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

模板部分，使用 <el-table> 元素作为表格容器，绑定 data 属性传入表格数据。用 v-for 指令遍历每一项数据，使用普通文本或 <el-input> 组件渲染每个单元格。表格最后一列为操作列，包含 “Add” 和 “Delete” 两个按钮，点击它们可以增加或删除数据行：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="Name" prop="name">
        <template #default="{row}">
          <el-input v-model="row.name" />
        </template>
      </el-table-column>
      <el-table-column label="Age" prop="age">
        <template #default="{row}">
          <el-input v-model.number="row.age" type="number" />
        </template>
      </el-table-column>
      <el-table-column label="Actions">
        <template #default="{row}">
          <el-button @click="addRow(row)">Add</el-button>
          <el-button @click="deleteRow(row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

逻辑部分，定义 tableData 数据数组，并分别实现 addRow 和 deleteRow 两个方法，以响应用户的添加、删除操作。在 addRow 方法中，向 tableData 数组中添加一个空对象。在 deleteRow 方法中，通过 Array.prototype.findIndex() 找到要删除的行在数组中的索引，并使用 Array.prototype.splice() 方法从数组中删除该行：

在这里，我们仍然使用了 ref 函数将 tableData 声明为响应式数据。然后在 template 中调用 addRow 和 deleteRow 方法，并传入当前操作的行数据作为参数。

希望这能帮到您！

文章来源地址https://www.toymoban.com/news/detail-463870.html

到了这里，关于element-plus el-table、动态添加、删除行、input输入框的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！