表格编辑demo

在这里插入图片描述

    <el-form :model="form" :rules="status ? rules : {}" ref="form" class="form-container" :inline="true">
      <el-table :data="tableData">
          <el-table-column label="计算公式">
            <template slot-scope="{ row, $index }">
              <div
                class="conut-row"
                @click.stop="handleActive($index)"
                :class="{ 'conut-row-active': $index == currentActiveIndex, 'error-row': errorFormulaRow[$index] }"
              >
                <div v-for="(item, index) in row.equation" :key="item" class="conut-row-tag">
                  <span v-if="index == 0 || index == 2">
                    {{ item }}
                  </span>
                  <span class="ysf-box" v-if="index == 1 || index == 3">
                    {{ item }}
                  </span>
                  <img
                    src="@/assets/img/close.svg"
                    alt=""
                    @click="delTag($index, index)"
                    v-if="status != 0 && !(form.type == 1)"
                  />
                </div>
                <el-input
                  v-model="row.ipt"
                  placeholder="请输入"
                  v-if="row.equation.length == 2 || row.equation.length == 4"
                  :disabled="!status"
                  @input="(v) => (row.ipt = v.replace(/^\D*(\d*(?:\.\d{0,4})?).*$/g, '$1'))"
                ></el-input>
              </div>
              <div class="item-error" v-if="errorFormulaRow[$index]">计算公式有误</div>
            </template>
          </el-table-column>
          <el-table-column label="等级" width="212">
            <template slot-scope="{ $index }">
              <el-input :value="levelEnum[$index]" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column label="上报最高层级" width="345">
            <template slot-scope="{ row, $index }">
              <el-radio
                :disabled="radioisDis(1, $index)"
                v-model="row.reportedHierarchy"
                label="1"
                @click.native.prevent="radioClick('1', row, $index)"
                >电场</el-radio
              >
              <el-radio
                :disabled="radioisDis(2, $index)"
                v-model="row.reportedHierarchy"
                label="2"
                @click.native.prevent="radioClick('2', row, $index)"
                >省份</el-radio
              >
              <el-radio
                :disabled="radioisDis(3, $index)"
                v-model="row.reportedHierarchy"
                label="3"
                @click.native.prevent="radioClick('3', row, $index)"
                >区域</el-radio
              >
              <el-radio
                :disabled="radioisDis(4, $index)"
                v-model="row.reportedHierarchy"
                label="4"
                @click.native.prevent="radioClick('4', row, $index)"
                >集团</el-radio
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

API 接口管理 架构 api接口设计

提供给第三方的业务接口应该如何设计呢&#xff1f;需要从哪些方面考虑&#xff1f;以及如何实现这些方面&#xff1f; 1、标准化 RESTful 2、安全性 1&#xff09;请求token&#xff08;防止接口被第三方调用&#xff09; token作为调用系统的凭证。token可以设置一次有效&…

UML 总结(基于《标准建模语言UML教程》)

定义 UML 又称为统一建模语言或标准建模语言&#xff0c;是一种标准的图形化建模语言&#xff0c;它是面向对象分析与设计的一种标准表示。尽管UML 本身没有对过程有任何定义&#xff0c;但UML 对任何使用它的方法&#xff08;或过程&#xff09;提出的要求是&#xff1a;支持用…

Linux初阶——信号

一、预备 1、信号的处理方式 1.1. 默认动作 当收到一个信号时&#xff0c;就执行这个信号的默认动作。 1.2. 忽略 当收到一个信号时&#xff0c;就忽略执行这个信号的默认动作。 1.3. 自定义动作 当收到一个信号时&#xff0c;就执行信号的自定义动作。 2、硬件中断 你…

IT监控对接华三CAS云管平台监控方案

概述 CAS云管平台是新华三集团自主研发的虚拟化和云计算管理平台&#xff0c;它主要面向数据中心&#xff0c;提供虚拟化和云计算管理&#xff0c;在教育行业、网络安全领域、高性能计算业务、企业IT部门等领域被广泛应用。在信创国产化背景下&#xff0c;以CAS、Fusion等为代…

Ajax:表单 模板引擎

Ajax&#xff1a;表单 & 模板引擎 form 表单form 属性 Ajax操控表单事件监听阻止默认行为收集表单数据 模板引擎art-template{{}}语法原文输出条件输出循环输出过滤器 原理 form 表单 在HTML中&#xff0c;可以通过<form>创建一个表单&#xff0c;收集用户信息。而采…

基于centos7.9搭建在线购物网站

mall 搭建数据库配置Java配置jar包 一款模仿天猫的在线购物网站&#xff0c;基于centos7.9搭建 搭建数据库 官网下载软件包后上传 基于centos7.9搭建mysql5.6.42 [rootmysql02 ~]# ls anaconda-ks.cfg init.sh MySQL-5.6.42-1.el7.x86_64.rpm-bundle.tar解压 tar -xf My…

Python 自动化运维:Python基础知识

Python 自动化运维&#xff1a;Python基础知识 目录 &#x1f4ca; Python 基础复习 数据类型、控制结构与常用函数面向对象编程&#xff08;OOP&#xff09;与类的使用函数式编程概念与 lambda 表达式异常处理与日志记录的基本实践 1. &#x1f4ca; Python 基础复习 数据…

【论文阅读】Tabbed Out: Subverting the Android Custom Tab Security Model

论文链接&#xff1a;Tabbed Out: Subverting the Android Custom Tab Security Model | IEEE Conference Publication | IEEE Xplore 总览 “Tabbed Out: Subverting the Android Custom Tab Security Model” 由 Philipp Beer 等人撰写&#xff0c;发表于 2024 年 IEEE Symp…

word技巧:如何禁止复制word文件内容?

在文档管理与协作的复杂环境中&#xff0c;确保文档内容的完整性和安全性至关重要。Microsoft Word作为一款广泛使用的文字处理软件&#xff0c;提供了强大的限制编辑功能&#xff0c;允许用户控制对文档内容的修改权限&#xff0c;有效防止未经授权的更改。本文将深入解析Word…

LabVIEW如何学习数据结构和算法

作为LabVIEW程序员&#xff0c;在学习数据结构和算法时&#xff0c;由于LabVIEW以图形编程为主&#xff0c;与传统编程语言的学习方式有些不同。因此&#xff0c;理解算法思想并将其在LabVIEW中实现是关键。 ​ 1. 夯实编程基础概念 LabVIEW与文本编程语言在实现逻辑上的方式…

Maven项目报错:invalid LOC header (bad signature)

文章目录 Maven项目报错&#xff1a;invalid LOC header (bad signature)1. Maven项目加载或Pom.Xml刷新后仍出现如下错误2. 解决方法 Maven项目报错&#xff1a;invalid LOC header (bad signature) 1. Maven项目加载或Pom.Xml刷新后仍出现如下错误 错误提示&#xff1a; in…

方形件排样优化与订单组批问题探析

方形件排样优化与订单组批问题是计算复杂度很高的组合优化问题&#xff0c;在工业工程中有很广泛的应用背景。为实现个性化定制生产模式&#xff0c;企业会选择订单组批的方式&#xff0c;继而通过排样优化实现批量切割&#xff0c;加工完成后再按照不同客户需求进行分拣&#…

高质量短视频素材平台推荐

在当今短视频内容日益增长的时代&#xff0c;拥有高质量的素材显得尤为重要。以下是一些值得关注的短视频素材平台&#xff0c;它们各具特色&#xff0c;适合不同需求的创作者。 蛙学网 蛙学网专注于提供高质量的短视频素材&#xff0c;适合各种创作需求。虽然该平台需要订阅&a…

DerpNStink: 1渗透测试

靶机&#xff1a;DerpNStink: 1 <https://www.vulnhub.com/entry/derpnstink-1,221/> 攻击机&#xff1a;kail linux 2024 目标&#xff1a;获得4个flag 1,将两台虚拟机网络连接都改为NAT模式&#xff0c;并查看靶机的MAC地址 2&#xff0c;攻击机上做主机扫描发现靶机 靶…

#HarmonyOS:页面和自定义组件生命周期

页面生命周期 即被Entry装饰的组件生命周期 onPageShow&#xff1a;页面每次显示时触发一次&#xff0c;包括路由过程、应用进入前台等场景。onPageHide: 页面每次隐藏时触发一次&#xff0c;包括路由过程、应用进入后台等场景。onBackPress: 当用户点击返回按钮是触发 组件…

自定义类型:联合和枚举【上】

自定义类型&#xff1a;数组&#xff0c;结构体&#xff0c;联合体&#xff0c;枚举。前面一些我们已经讲过了&#xff0c;接下来我们讲联合体和枚举。 一.联合体 1.联合体类型的声明 像结构体一样&#xff0c;联合体也是由一个或者多个成员构成&#xff0c;这些成员可以不同…

网络搜索引擎Shodan(2)

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 声明&#xff1a;本文主要用作技术分享&#xff0c;所有内容仅供参考。任何使用或依赖于本文信息所造成的法律后果均与本人无关。请读者自行判断风险&#xff0c;并遵循相关法律法规。 感谢泷…

(南京观海微电子)——GH7006-01_HKC_B3-PV043WVQ-N80_MIPI_LVDS_RGB原理及代码介绍

1. 原理 2. 代码 /**************************************************/ // Model - GV050WVQ-N82 // IC - GH7006 // Width - 800 // Height - 480 // REV: - V01 // DATA - 20240621 // INTERFACE- LV…

4.1.2 网页设计技术

文章目录 1. 万维网&#xff08;WWW&#xff09;的诞生2. 移动互联网的崛起3. 网页三剑客&#xff1a;HTML、CSS和JavaScriptHTML&#xff1a;网页的骨架CSS&#xff1a;网页的外衣JavaScript&#xff1a;网页的活力 4. 前端框架的演变基于CSS的框架基于JavaScript的框架基于MV…

质量漫谈一

我知道很多同学看到这类问题&#xff0c;第一反应想要去寻找的就是作为测试角色&#xff0c;应该要如何如何去做&#xff1f;但是今天这里作为质量第一篇&#xff0c;不打算按照这样单角度去写&#xff0c;这类同学可以就此打住&#xff0c;如果在意的话&#xff0c;可关注后续…