首页 > 其他分享 >vue|el-table表格添加一行删除一行并且验证必填

vue|el-table表格添加一行删除一行并且验证必填

时间:2024-08-07 12:54:40浏览次数:11  
标签:el 必填 addform 一行 tableData productName id

我们在工作中,难免会遇到一些特殊的场景。比如动态表格的实现,主要的实现就是可以增加删除列,并且需要对数据进行验证。如何在vue中使用el-table添加一行删除一行并且验证必填呢?请看VCR

下面是代码示例:

<template>
  <div style="display: flex;justify-content: center; align-items: center;height: 100%;margin-top: 200px;">
    <el-card style="width:1000px;height:600px">
      <el-button type="primary" size="small" style="display: flex;float: right;margin-bottom: 10px;" @click="AddTab">
        <el-icon>
          <Plus />
        </el-icon>
        添加一行
      </el-button>
      <el-form :model="addform" ref="addform" :rules="rules">
      <el-table :data="addform.tableData" border height="450px">
        <el-table-column type="index" label="序号" min-width="60"></el-table-column>
        <el-table-column prop="productName" label="商品名称" min-width="180">
          <template v-slot="scope">
            <el-form-item :prop="'tableData[' + scope.$index + '].productName'" :rules="rules.productName">
              <el-input v-model="scope.row.productName" placeholder="请输入商品名称"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="productType" label="商品类型" min-width="180">
          <template v-slot="scope">
            <el-form-item :prop="'tableData[' + scope.$index + '].productType'" :rules="rules.productType">
              <el-select v-model="scope.row.productType" placeholder="请选择商品类型" clearable filterable>
                <el-option value="1" label="春装"></el-option>
                <el-option value="2" label="夏装"></el-option>
                <el-option value="3" label="秋装"></el-option>
                <el-option value="4" label="冬装"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="productPrice" label="商品价格" min-width="180">
          <template v-slot="scope">
            <el-form-item :prop="'tableData[' + scope.$index + '].productPrice'" :rules="rules.productPrice">
              <el-input v-model="scope.row.productPrice" type="number" placeholder="请输入商品价格"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="danger" size="small" @click="DelTab(scope.row)">
              <el-icon>
                <Delete />
              </el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
      <div style="align-items: center;display: flex;justify-content: center;margin-top: 10px;">
        <el-button type="primary" @click="SaveTab" size="small">保存</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        addform:{
          tableData: [],
        },
        rules:{
          productName:[{required: true, message: '请输入商品名称', trigger: 'blur' }],
          productType:[{required: true, message: '请选择商品类型', trigger: 'change' }],
          productPrice:[{required: true, message: '请输入商品价格', trigger: 'blur' }],
        }
      }
    },
    created() {
      this.queryTable();
    },
    methods: {
      //查询列表
      async queryTable() {
        //模拟后端传过来的数据
        var result = [
          { id: 1, productName: '衬衫', productType: '1', productPrice: 60 },
          { id: 2, productName: '连衣裙', productType: '2', productPrice: 90 }
        ];
        //赋值
        this.addform.tableData = result;
      },
      //添加行
      async AddTab() {
        //获取表格最后一行的id
        var pid = this.addform.tableData[this.addform.tableData.length - 1]?.id;
        //添加行数据
        var model = { id: pid + 1, productName: '', productType: '', productPrice: null }
        this.addform.tableData.push(model)
      },
      //删除行
      async DelTab(row) {
        //filter过滤数据
        this.addform.tableData = this.addform.tableData.filter(o => { return o.id != row.id })
      },
      async SaveTab(){
        this.$refs.addform.validate(valid=>{
          if(valid){
            //---后端接口处理
            this.$message.success("保存成功")
          }
        })
      }
    }
  }
</script>

知识点

1)filter过滤,可以筛选掉不需要的数据this.addform.tableData.filter(o => { return o.id != row.id })。return后面限制要过滤的条件。

2)push插入。可以用来往数组里面插入数据。

3)this.$refs.addform.validate()必填验证,this.$refs指向el-form的ref,获取el-form的元素。实现rules的验证。

4):rules="rules"验证规则

5):prop="'tableData[' + scope.$index + '].productName'"为什么prop这样绑定而不是直接绑定productName。这是el-form记录的数据是单条数组,但是el-table记录的是多条数据的集合。所以我们要找到表格中的哪一行的输入框。所以使用scope.$index去找到tableData的行数据。

最后

如果有哪里不懂的可以私信我。这个比较复杂,对初学者很不友好,但是对于刚开始工作的小伙伴有可能会有用。后续我会开一个专栏专门讲基础的vue.

标签:el,必填,addform,一行,tableData,productName,id
From: https://blog.csdn.net/tomlostjack/article/details/140988704

相关文章

  • 使用IText7和miniExcel处理pdf并输出内容
    使用框架:.net8.0、winform操作系统:windows11编译器:vs2022内容:使用iText7、miniExcel,介绍如何简单读取pdf文件文字内容,并做处理后输出至excel文件中秉承着一贯的风格,还是只讲操作,囫囵吞枣就是要讲究一个稳准狠......
  • OSI(Open Systems Interconnection Model)七层模型
    前情提要:是一个描述计算机网络通信协议设计的概念模型。它由国际标准化组织(ISO)在1984年发布,用于帮助不同系统之间的通信。这个模型将网络通信过程分为七个层次,每一层都承担着特定的功能:1.物理层(PhysicalLayer):负责在物理媒体上传输原始比特流。它关注的是比特在电缆、光纤......
  • Nessus Professional 10.8.0 Auto Installer for RHEL 9/AlmaLinux 9/Rocky Linux 9
    NessusProfessional10.8.0AutoInstallerforRHEL9/AlmaLinux9/RockyLinux9发布Nessus试用版自动化安装程序,支持macOSSonoma、RHEL9和Ubuntu24.04请访问原文链接:https://sysin.org/blog/nessus-auto-install-for-rhel-9/,查看最新版。原创作品,转载请保留出处。N......
  • 代码随想录算法训练营第62天 | 最短路径:dijkstra(堆优化版)+ Bellman_ford算法
    47.参加科学大会https://kamacoder.com/problempage.php?pid=1047dijkstra(堆优化版)精讲https://www.programmercarl.com/kamacoder/0047.参会dijkstra堆.html#思路94.城市间货物运输Ihttps://kamacoder.com/problempage.php?pid=1152Bellman_ford算法精讲https://www.pr......
  • Linux 修改 默认 shell
    连接到目标计算机后,默认情况下会进入目标计算机的默认shell。要切换到bashshell,只需在终端窗口中输入以bash,以非登录交互方式启动bashshell。但是每次都输入bash很麻烦,就需要修改默认shell,使其登录就进入bash(或者其他shell)。查看系统已安装的shell如果要查看当前系统的she......
  • createElement 和 cloneElement 的区别
    引言在React中,组件是构建用户界面的基本单元,它们可以通过不同的方式创建和操作。两个常用的方法是React.createElement和React.cloneElement。虽然它们都与React元素的创建和操作有关,但它们的用途和功能却完全不同。了解这两个方法的区别对于有效地构建和管理React应......
  • SciTech-Mathematics-Probability+Statistics-Comparison:Chance + Possibility + Lik
    https://www.geeksforgeeks.org/what-is-the-difference-between-likelihood-and-probability/1.Chance2.Possibility3.Likelihood4.ProbabilityWhatIstheDifferenceBetween“Likelihood”and“Probability”?LastUpdated:30Jul,2024https://www.geeksforg......
  • 基于Vue2+ElementUI/Vue3+ElementPlus对el-notification增加倒计时进度条特效,鼠标移入
    遇到一个需求就是对这个el-notification加一个倒计时进度条,方便用户知道该通知何时自动关闭。一、示例代码(1)基于Vue2+ElementUI的项目<template><div><el-button@click="showTip">doit</el-button></div></template><script>exportdefault{......
  • Delphi打开软键盘osk.exe
    开发环境DelphiXE11.3UnitunitUnit1;interfaceusesWinapi.Windows,Winapi.Messages,System.SysUtils,System.Variants,System.Classes,Vcl.Graphics,Vcl.Controls,Vcl.Forms,Vcl.Dialogs,Vcl.StdCtrls,winapi.ShellAPI,ShlObj,TLHelp32;typeTForm1......
  • 10 tqdm模块实现进度条_Parallel并行加快速度
     欢迎来到@一夜看尽长安花博客,您的点赞和收藏是我持续发文的动力对于文章中出现的任何错误请大家批评指出,一定及时修改。有任何想要讨论的问题可联系我:[email protected]。发布文章的风格因专栏而异,均自成体系,不足之处请大家指正。   专栏:java全栈C&C++PythonAIP......