element table表格支持添加编辑校验

news2025/1/24 8:21:31

实现效果:

将table表格与form表单结合使用 (用el-form外层包裹el-table结合rules进行校验)

代码实现

<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="AddData"
          >添加</el-button
        >
      </div>
    </el-card>
    <el-card class="box-card" shadow="never">
      <el-form ref="Issuerform" :model="Issuerform">
        <el-table :data="Issuerform.tableIssuerData" border>
          <el-table-column
            prop="Name"
            label="简称"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="!scope.row.editCell">{{ scope.row.Name }}</span>
              <el-form-item
                v-else
                :prop="'tableIssuerData.' + scope.$index + '.Name'"
                :rules="rules.Name"
              >
                <el-autocomplete
                  ref="autocomplete"
                  v-model="scope.row.Name"
                  class="querySearch"
                  style="width: 100%"
                  size="mini"
                  clearable
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入搜索内容"
                  :trigger-on-focus="false"
                  @select="handleSelect"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="Code"
            label="代码"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="!scope.row.editCell">{{ scope.row.Code }}</span>
              <el-form-item
                v-else
                :prop="'tableIssuerData.' + scope.$index + '.Code'"
                :rules="rules.Code"
              >
                <el-input size="mini" v-model="scope.row.Code"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            prop="issuer"
            label="主体"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="Type"
            label="类型"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="!scope.row.editCell">
                {{ scope.row.Type }}
              </span>
              <el-form-item
                v-else
                :prop="'tableIssuerData.' + scope.$index + '.Type'"
                :rules="rules.Type"
              >
                <el-select
                  v-model="scope.row.Type"
                  placeholder="请选择"
                  clearable
                  size="mini"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in TypeOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                v-if="scope.row.editCell"
                @click="issuerSave(scope.row, scope.$index)"
              >
                保存
              </el-button>
              <el-button
                size="small"
                type="text"
                v-if="!scope.row.editCell"
                @click="issuerEdit(scope.row, scope.$index)"
              >
                编辑
              </el-button>
              <el-button
                size="small"
                type="text"
                @click="issuerdelete(scope.row, scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-card>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      Issuerform: {
        tableIssuerData: [
          {
            Name: null,
            Code: null,
            issuer: null,
            Type: null,
            editCell: true,
          },
        ],
      },
      TypeOptions: [
        {
          value: "1",
          name: "类型1",
        },
        {
          value: "2",
          name: "类型2",
        },
        {
          value: "3",
          name: "类型3",
        },
      ],
      rules: {
        Name: [{ required: true, message: "", trigger: "blur" }],
        Code: [{ required: true, message: "", trigger: "blur" }],
        Type: [{ required: true, message: "", trigger: "change" }],
      },
    };
  },
  methods: {
    AddData() {
      this.Issuerform.tableIssuerData.push({
        Name: null,
        Code: null,
        issuer: null,
        Type: null,
        editCell: true,
      });
    },
    //模糊搜索
    querySearchAsync(queryString, cb) {
      let param = {
        name: queryString,
      };
      console.log(param, cb);
    },
    handleSelect() {},
    issuerSave(row, index) {
      this.$refs.Issuerform.validate((valid) => {
        if (valid) {
          this.Issuerform.tableIssuerData[index].editCell = false;
        } else {
          return false;
        }
      });
    },
    issuerEdit(row, index) {
      this.Issuerform.tableIssuerData[index].editCell = true;
    },
    issuerdelete(row, index) {
      this.Issuerform.tableIssuerData.splice(index, 1);
    },
  },
};
</script>
<style scoped lang='less'>
/deep/.el-form-item__error {
  display: none; //隐藏校验提示
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/703192.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

E8-事关明细表里的控件事件绑定、日期的计算、明细表的求和等问题的处理办法

起因 下面的讲述的事情是从开发出差申请流程开始的。涉及的知识点偏多&#xff0c;且得容我慢慢梳理出来。以下篇幅可能会有点儿长&#xff0c;但内容我会争取写得精彩的。 图1 发起表单样式如图1&#xff0c;我想实现的是当修改出发日期或结束日期的时候&#xff0c;自动计算…

并发-synchronized详解

JDK1.6之前的synchronized关键字一来就直接给对象加了一把重量级锁&#xff0c;频繁地在用户态和内核态之间切换&#xff0c;导致性能非常低。为了弥补synchronized的不足&#xff0c;大佬doug lee写了一个AQS框架&#xff0c;用Java语言实现了ReentrantLock。然后在JDK1.6之后…

电脑文件夹怎么设置密码?3个方法为文件加密!

我的电脑里存了很多重要的文件夹&#xff0c;为了防止信息的泄露&#xff0c;我想把这些文件夹都设置密码。但是不知道具体应该如何操作。请求大家的帮助&#xff01; 我们平常在使用电脑时&#xff0c;可能会将很多重要的文件保存在电脑中。如果不想让别人看到我们这些重要的文…

JMeter安装RabbitMQ测试插件

目录 前言&#xff1a; 具体实现步骤&#xff1a; 1、ant环境搭建 2、AMQP源码下载 3、拷贝JMeter_core.jar包到JMeter-Rabbit-AMQP插件根目录下 4、修改AMQP插件的配置文件 5、打包 6、RabbitMQ客户端插件下载 7、完成以上&#xff0c;重启JMeter创建线程组就可以看到…

智能小家电如何升级Type-C接口充电?

目前市面上智能小家电充电接口还是USB Micor&#xff0c;AC&#xff0c;DC接口等&#xff0c;今年随着欧盟的一纸令下&#xff0c;22年12月24日&#xff0c;欧洲理事会最终批准了“在欧盟范围内统一充电器接口”的法案。这意味着到2024年&#xff0c;usb type-c接口将成为一系列…

openknx初编译

knx协议出来也是很长时间了&#xff0c;但国内相关开发的文章很少&#xff0c;比起zigbee,lora这些网上一搜一大零的&#xff0c;显得可怜。因为公司以后可能会开发knx产品&#xff0c;所以对国外的openknx自已研究了一下。 https://github.com/thelsing/knx 这个就是openknx项…

Openlayers实战,Openlayers调整地图可视范围到多个点组成的多边形边界,可视范围缩放到多个点的中心点

专栏目录: OpenLayers入门教程汇总目录 前言 本片文章详细讲解如何使用Openlayers调整地图可视范围到多个点组成的多边形边界。 也即Openlayers根据多个点坐标生成一个矩形可视范围,并判断当前传入的矩形可视范围是否在当前可视范围内。如果在当前可视范围内,则调整地图中…

latex中两种图并排放,而且各自有小标题caption

\begin{figure*}[htbp] \centering #小标题 \subfigure[Case study in terms of interpretability on dataset HDep3.]{ \begin{minipage}[t]{0.37\linewidth} %linewidth小于0.5 \centering \includegraphics[scale0.2]{figures/hdep3d.png} #大小主要调节scale. %\caption{fi…

Blazor前后端框架Known-V1.2.1

V1.2.1 Known是基于C#和Blazor开发的前后端分离快速开发框架&#xff0c;开箱即用&#xff0c;跨平台&#xff0c;一处代码&#xff0c;多处运行。 概述 基于C#和Blazor实现的快速开发框架&#xff0c;前后端分离&#xff0c;开箱即用。跨平台&#xff0c;单页应用&#xff…

耳挂式骨传导耳机哪个牌子好,分享几个品牌的骨传导耳机

骨传导耳机就是利用震动来传递声音的耳机&#xff0c;在运动时佩戴骨传导耳机&#xff0c;可以听歌也能听周围的声音&#xff0c;提高了运动时的安全性。目前市面上的骨传导耳机也是琳琅满目。今天就来给大家分享下目前市面上比较常见的几款骨传导耳机。希望对正在选购骨传导耳…

Linux v4l2框架分析

1. 概述 V4L2(Video for Linux 2)&#xff1a;Linux内核中关于视频设备驱动的框架&#xff0c;对上向应用层提供统一的接口&#xff0c;对下支持各类复杂硬件的灵活扩展&#xff1b; V4L2框架&#xff0c;主要包括v4l2-core、meida framework、videobuf2等模块&#xff0c;这也…

120.【ElastiSearch】

ElasticSearch-初级 (一)、什么是ElasticSearch(库、表、记录)1.ElasticSearch是什么2.ElasticSearch学习路线3.聊聊Doug Cutting4.Lucene 和 ElasticSearch的关系: (二)、ElasticSearch概述1.基本概述2.百度搜索关键字思考3.目前都有哪些公司在用ElasticSearch技术 (三)、ES和…

检验样本是否服从泊松分布

本文以一个订单数据为例&#xff0c;研究顾客购买次数的分布规律&#xff0c;尝试从中估计总体的分布&#xff0c;以对后续的订单数据进行预测或进行业绩的对比。 # 环境准备 import numpy as np import pandas as pd import scipy.stats as stats import matplotlib.pyplot a…

Nginx(3)nginx的Rewrite功能

nginx跨域 Rewrite功能配置Rewrite的相关命令Rewrite的案例域名跳转域名镜像独立域名目录自动添加/合并目录防盗链 Rewrite功能配置 Rewrite是Nginx服务器提供的一个重要基本功能&#xff0c;是Web服务器产品中几乎必备的功能。主要的作用是用来实现URL的重写。 注意:Nginx服…

AI生成图片检测器接口,应用于内容审核、虚拟现实应用和促进艺术及设计领域创新等场景

【检测率99.0%以上】可以快速准确地判断一张图片是否为AI生成&#xff0c;减少人工审核的工作量&#xff0c;提高工作效率、降低运营成本&#xff0c;帮助人们更好地管理和利用数字图像资源。广泛应用于内容审核、虚拟现实应用和促进艺术及设计领域创新等场景。 一、效果展示 …

Unity学习笔记--EventSystem事件系统在使用上需要注意的地方(很基础,但是很多人会忘记!!!)

目录 前言代码Unity 场景配置运行报错分析解决办法拓展&#xff08;预告&#xff09; 前言 之前有写过一篇关于事件系统实现以及使用的文章 Unity学习笔记–C#事件系统的实现与应用 最近在使用的时候遇到了一些问题&#xff0c;所以在此记录下&#xff0c;也为看到这篇文章的人…

魏副业而战:视频带货借助热点,这个账号月赚20w+

我是魏哥&#xff0c;与其在家躺平&#xff0c;不如魏副业而战&#xff01; 最近魏哥一直在研究短视频&#xff0c;每天刷刷抖音&#xff0c;经常刷到高考相关的视频。 本来高考跟我没关&#xff0c;毕竟孩子还小&#xff0c;但是刷得多了&#xff0c;魏哥发现有情况。 像这个…

oneAPI人工智能分析工具包实现图像处理

文章目录 一、oneAPI的介绍二、oneAPI实现图像处理环境配置加载预训练模型和网络创建IECore对象和设备插件准备输入数据执行推理总结 一、oneAPI的介绍 oneAPI是一个由英特尔&#xff08;Intel&#xff09;主导的、面向异构计算的开放标准和平台。它旨在简化和加速跨多种硬件架…

体验攻略 | 新时代的用研人,没有它不行

用户研究&#xff08;以下简称“用研”&#xff09;是随着互联网兴起和发展、从体验设计领域进一步分化出来的岗位。在互联网公司&#xff0c;用研岗位更多以用户体验为导向&#xff0c;主要工作为洞察用户的需求、行为和动机&#xff0c;为产品开发和服务设计提供指导性意见。…

DNS解析:连接互联网的关键步骤

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。&#x1f60a; 座右铭&#xff1a;不想…