vue el-table 动态添加行、删除行

最新推荐文章于 2024-10-10 11:12:12 发布

＊且听风吟

最新推荐文章于 2024-10-10 11:12:12 发布

阅读量2.1w

点赞数 10

分类专栏： # Vue 2.x

本文链接：https://blog.csdn.net/HH18700418030/article/details/100106463

版权

本文介绍了如何在Vue项目中使用el-table实现动态添加和删除行的功能。通过数据驱动DOM，通过修改绑定到el-table的数组来实现表格内容的变化。点击添加按钮向数组添加数据项，表格随之增加一行；点击删除按钮则移除数组中的当前行，对应表格行也将被删除。

摘要由CSDN通过智能技术生成

项目中有需要动态添加和删除 el-table 行的需要，就学习了下，发现很简单：

<template>
  <el-dialog
    width="50%"
    :visible.sync="isShow"
    :before-close="beforeClose"
    title="自定义设备类型属性">
    <div class="dialogDiv">
      <el-table 
        :data="tableData.filter(data => handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase()))" 
        style="width: 100%" border>
        <el-table-column prop="code" 
          :label="$t('basicData.device.propDlg.code')">
        </el-table-column>
        <el-table-column prop="maxValue" 
          :label="$t('basicData.device.propDlg.maxValue')">
        </el-table-column>
        <el-table-column prop="minValue" 
          :label="$t('basicData.device.propDlg.minValue')">
        </el-table-column>
        <el-table-column prop

最低0.47元/天解锁文章