Elment ui 动态表格与表单校验 列表数据 组件

news/2024/6/15 15:00:17/文章来源:https://blog.csdn.net/Ajaxguan/article/details/137132571

组件做个记录,方便以后会用到。

效果:

代码 :

<template><el-dialog title="商品详情" :visible.sync="dialogVisible" width="80%"><el-tabs v-model="activeTab"><el-tab-pane label="营销表现" name="marketing"><div class="boxForm"><p class="fz-18 mb-40">营销表现</p><el-form ref="formData" :model="formData" ><el-table :data="formData.tableData" style="width: 100%"><el-table-column label="日期" width="230"><template slot="header" slot-scope="scope"><span style="color: red">*</span>日期</template><template slot-scope="scope"><el-form-item v-if="scope.row.active"  :prop="'tableData.' + scope.$index + '.date'" > {{ formatDateRange(scope.row.date) }}</el-form-item><el-form-itemv-else:prop="'tableData.' + scope.$index + '.date'" :rules="[ { required: true, message: '请选择', trigger: 'change' } ]"><el-date-picker v-model="scope.row.date" type="daterange" format="yyyy年MM月dd日"value-format="yyyy-MM-dd" style="width: 100%" required size="mini"></el-date-picker></el-form-item></template></el-table-column><el-table-column label="成交额" width="200"><template slot="header" slot-scope="scope"><span style="color: red">*</span>成交额</template><template slot-scope="scope"><el-form-item v-if="scope.row.active" :prop="'tableData.' + scope.$index + '.amount'" > {{ scope.row.amount }} USD</el-form-item><el-form-itemv-else:prop="'tableData.' + scope.$index + '.amount'" :rules="[ { required: true, message: '请输入', trigger: 'blur' }]"><el-input-numberv-model="scope.row.amount"placeholder="请输入成交额"style="width:110px":min="0":precision="2"size="mini":controls="false"></el-input-number>USD</el-form-item></template></el-table-column><el-table-column label="订单数"><template slot="header" slot-scope="scope"><span style="color: red">*</span>订单数</template><template slot-scope="scope"><el-form-item v-if="scope.row.active" :prop="'tableData.' + scope.$index + '.orders'" > {{ scope.row.orders }}</el-form-item><el-form-itemv-else:prop="'tableData.' + scope.$index + '.orders'" :rules="[ { required: true, message: '请输入', trigger: 'blur' }]"><el-input-numberv-model="scope.row.orders"placeholder="请输入订单数"style="width:120px":min="0"size="mini":controls="false"></el-input-number></el-form-item></template></el-table-column><el-table-column label="推广次数"><template slot="header" slot-scope="scope"><span style="color: red">*</span>推广次数</template><template slot-scope="scope"><el-form-item v-if="scope.row.active" :prop="'tableData.' + scope.$index + '.promotions'" > {{ scope.row.promotions }}</el-form-item><el-form-itemv-else:prop="'tableData.' + scope.$index + '.promotions'" :rules="[ { required: true, message: '请输入', trigger: 'blur' }]"><el-input-numberv-model="scope.row.promotions"placeholder="请输入推广次数"style="width:120px":min="0"size="mini":controls="false"></el-input-number></el-form-item></template></el-table-column><el-table-column label="操作人"><template slot="header" slot-scope="scope"><span style="color: red">*</span>操作人</template><template slot-scope="scope"><el-form-item v-if="scope.row.active" :prop="'tableData.' + scope.$index + '.operator'" > {{ showoperation(scope.row.operator) }}</el-form-item><el-form-itemv-else:prop="'tableData.' + scope.$index + '.operator'" :rules="[ { required: true, message: '请选择', trigger: 'change' }]"><el-select v-model="scope.row.operator" placeholder="请选择" size="mini" style="width:120px"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="text" @click="handleAdd(scope.$index)" v-if="scope.$index == 0">添加</el-button><el-button type="text" @click="handleEdit(scope.$index)" v-if="scope.row.active">编辑</el-button><el-button type="text" @click="handleDel(scope.$index)" v-if="scope.$index !== 0" style="color:red;">删除</el-button></template></el-table-column></el-table><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"layout="total, sizes, prev, pager, next, jumper" :total="formData.tableData.length"></el-pagination></el-form></div></el-tab-pane></el-tabs><span slot="footer" class="dialog-footer"><el-button type="primary" @click="saveOrUpdate">保存更新</el-button><el-button @click="dialogVisible = false">取消</el-button></span></el-dialog>
</template><script>export default {data() {return {dialogVisible: true,activeTab: 'marketing',options: [],formData: {tableData: [{ date: '', amount: '', orders: '', promotions: '', operator: '', active: false, key: Date.now() },],},operators: [{ label: 'Operator 1', value: '1' },{ label: 'Operator 2', value: '2' },{ label: 'Operator 3', value: '3' }],currentPage: 1,pageSize: 10,rules: {date: [{ required: true, message: '请输入日期', trigger: 'blur' }],amount: [{ required: true, message: '请输入成交额', trigger: 'blur' }],orders: [{ required: true, message: '请输入订单数', trigger: 'blur' }],promotions: [{ required: true, message: '请输入推广次数', trigger: 'blur' }],operator: [{ required: true, message: '请选择操作人', trigger: 'change' }]}};},created () {this.getOperationUser()},methods: {// 认领人async getOperationUser () {let res = await this.$api.operationUser()if (res.code === 10000) {this.options = res.data.length? res.data.map((i) => {return { ...i, label: i.username, value: i.id }}): []} else {this.$message({ type: 'error', message: res.message })}},handleAdd(index) {this.formData.tableData.splice(index + 1, 0, { date: '', amount: '', orders: '', promotions: '', operator: '', active: false, key: Date.now() })},handleDel(index) {this.formData.tableData.splice(index, 1)},// 编辑handleEdit(index) {this.formData.tableData[index].active = false},handleSizeChange(size) {this.pageSize = size;this.currentPage = 1; },handleCurrentChange(page) {this.currentPage = page;},saveOrUpdate() {this.$refs['formData'].validate((valid) => {if (valid) {console.log('校验通过')this.formData.tableData.map(item => {item.active = truereturn item})}})},showoperation(id) {let result = this.options.find(item => item.value === id);return result ? result.label : null;},// 日期转换formatDateRange (dateRange) {const startDate = new Date(dateRange[0]);const endDate = new Date(dateRange[1]);const newStartDate = new Date(startDate.getTime() + 39 * 24 * 60 * 60 * 1000); // 加上39天const newEndDate = new Date(endDate.getTime() + 39 * 24 * 60 * 60 * 1000); // 加上39天const formattedStartDate = `${newStartDate.getFullYear()}.${(newStartDate.getMonth() + 1).toString().padStart(2, '0')}.${newStartDate.getDate().toString().padStart(2, '0')}`;const formattedEndDate = `${newEndDate.getFullYear()}.${(newEndDate.getMonth() + 1).toString().padStart(2, '0')}.${newEndDate.getDate().toString().padStart(2, '0')}`;return `${formattedStartDate}-${formattedEndDate}`;},}
};
</script>
<style lang='scss' scoped>
.boxForm {box-shadow: rgb(59 59 59 / 10%) 0px 2px 6px 0px;border-radius: 8px;margin: 4px;padding: 20px;margin-top: 10px;
}
::v-deep .el-table .cell{height: 54px;
} 
::v-deep .el-table th .cell {height: 22px !important;
}
</style>

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

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

相关文章

unbuntu mysql8.0新建用户及开启远程连接

MySQL更新到8.0以上版本后&#xff0c;在创建连接远程的用户的时候和之前5.x的版本有了很大的不同&#xff0c;不能使用原来同时创建用户和授权的命令。 以下是记录的MySQL8.0创建用户并授权的命令&#xff1a; 查看用户表&#xff1a; user mysql; select host,user,authen…

后端前行Vue之路(二):模版语法之插值与指令

1.概述 Vue.js的模板语法是一种将Vue实例的数据绑定到HTML文档的方法。Vue的模板语法是一种基于HTML的扩展&#xff0c;允许开发者将Vue实例中的数据绑定到HTML元素&#xff0c;以及在HTML中使用一些简单的逻辑和指令。Vue.js 基于 HTML 的模板语法允许开发者声明式地将 DOM 绑…

COCO数据集——B站课程学习笔记

COCO数据集——B站课程学习笔记 因为要对coco数据格式的数据集进行切片&#xff0c;但对于coco数据集的结构及pycocotools不熟导致走了很多弯路&#xff0c;还有就是对字典格式的使用&#xff0c;需要取对原字典复制后的进行取出&#xff0c;否则就会改变原字典&#xff0c;真…

公司服务器被.rmallox攻击了如何挽救数据?

公司服务器被.rmallox攻击了如何挽救数据&#xff1f; .rmallox这种病毒与之前的勒索病毒变种有何不同&#xff1f;它有哪些新的特点或功能&#xff1f; .rmallox勒索病毒与之前的勒索病毒变种相比&#xff0c;具有一些新的特点和功能。这种病毒主要利用加密技术来威胁用户&am…

【攻防世界】warmup (代码审计)

进入题目环境&#xff0c;只有一个表情&#xff1a; ctrl u 查看源代码&#xff1a; 源代码提示我们访问 /source.php。访问结果如下&#xff1a; 我们进行代码审计&#xff0c;发现解题的关键点 include &_REQUEST[file]。但是题目使用了白名单进行了过滤。我们发现白名单…

【JavaEE初阶系列】——多线程案例三——定时器

目录 &#x1f6a9;定时器是什么 &#x1f6a9;标准库中的定时器 &#x1f6a9;自定义定时器 &#x1f388;构造Task类 &#x1f4dd;相对时间和绝对时间 &#x1f388;构造MyTime类 &#x1f4dd;队列空和队列不为空 &#x1f4dd;wait(带参)解决消耗资源问题 &#…

Redis.配置文件

基础篇Redis 6.1.2 .配置文件 spring:redis:host: 192.168.150.101port: 6379password: 123321lettuce:pool:max-active: 8 #最大连接max-idle: 8 #最大空闲连接min-idle: 0 #最小空闲连接max-wait: 100ms #连接等待时间6.1.3.测试代码 SpringBootTest class RedisDemo…

ios启动页与flutter启动页无缝衔接,无闪烁和黑屏解决

1、首先需要配置原生的 LaunchScreen 如下图&#xff1a; 注意&#xff1a;LaunchScreen中View的SafeArea 一定要有。如果这里没有SafeArea就会出现flutter渲染第一帧和native衔接时出现闪烁的现象。splash.png也尽量放在根目录中&#xff0c;不要放在Assets中。 2、flutter启…

【MySQL系列】使用 ALTER TABLE 语句修改表结构的方法

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

设计模式深度解析:深入浅出的揭秘游标尺模式与迭代器模式的神秘面纱 ✨

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 深入浅出的揭秘游标尺模式与迭代器模式的神秘面纱 开篇&#xff1a; 欢迎来到设计模式的神秘…

租用2核4G云服务器优惠价格,阿里云腾讯云京东云报价

当前最新2核4G云服务器多少钱&#xff1f;165元一年&#xff0c;30元3个月。阿里云2核4G服务器165元一年&#xff0c;30元3个月、腾讯云2核4G5M服务器165元一年、京东云2核4G云主机126元1年&#xff0c;华为云也提供2核4G配置云服务器。阿腾云atengyun.com整理2024年最新云服务…

iPad Pro安装Code APP结合内网穿透实现公网SSH远程连接服务器云开发

文章目录 1. 在iPad下载Code APP2.安装cpolar内网穿透2.1 cpolar 安装2.2 创建TCP隧道 3. iPad远程vscode4. 配置固定TCP端口地址4.1 保留固定TCP地址4.2 配置固定的TCP端口地址4.3 使用固定TCP地址远程vscode 本文主要介绍开源iPad应用IDE Code App 如何下载安装&#xff0c;并…

【网络安全技术】——密码技术基础与身份认证技术(学习笔记)

&#x1f4d6; 前言&#xff1a;加密技术是目前网络安全的基础。数据加密技术是指对在网络中所发送的明文消息用加密密钥加密成密文进行传送&#xff0c;接收方用解密密钥进行解密再现明文消息&#xff0c;从而保证传输过程中密文信息即使被泄漏&#xff0c;在无密钥的情况下仍…

【Linux】体验一款开源的Linux服务器运维管理工具

今天为大家介绍一款开源的 Linux 服务器运维管理工具 - 1panel。 一、安装 根据官方那个提供的在线文档&#xff0c;这款工具的安装需要执行在线安装&#xff0c; # Redhat / CentOScurl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start…

【Linux】UnixBench介绍、分数调优思路以及测试2D3D的方法

一.简介 unixbench是一个用于测试unix系统性能的工具&#xff0c;也是一个比较通用的benchmark&#xff0c; 此测试的目的是对类Unix 系统提供一个基本的性能指示&#xff0c;很多测试用于系统性能的不同方面&#xff0c;这些测试的结果是一个指数值&#xff08;index value&am…

在遭受攻击时如何有效监测服务器流量峰值——实战指南

引言 在网络安全领域&#xff0c;分布式拒绝服务攻击&#xff08;DDoS&#xff09;是一种常见的针对服务器及网络资源的恶意行为&#xff0c;它通过短时间内发送大量无效请求&#xff0c;导致服务器不堪重负而无法正常服务合法用户。当服务器遭受攻击时&#xff0c;快速识别并…

实测梳理一下kafka分区分组的作用

清空topickafka-topics.sh --bootstrap-server localhost:9092 --delete --topic second创建分区kafka-topics.sh --create --bootstrap-server localhost:9092 --replication-factor 1 --partitions 3 --topic second发kafka-console-producer.sh --bootstrap-server localhos…

Linux系统下安装jdk与tomcat【linux】

一、yum介绍 linux下的jdk安装以及环境配置&#xff0c;有两种常用方法&#xff1a; 1.使用yum一键安装。 2.手动安装&#xff0c;在Oracle官网下载好需要的jdk版本&#xff0c;上传解压并配置环境。 这里介绍第一种方法&#xff0c;在此之前简单了解下yum。 yum 介绍 yum&…

MySQL生产环境常见故障及解决方案汇总

MySQL生产环境常见故障及解决方案汇总 1. MySQL主从同步异常故障1.1. 情景说明1.2. 排查过程1.3. 数据同步2. MySQL慢查询故障1. MySQL主从同步异常故障 1.1. 情景说明 MySQL主库网卡需要更换IP地址,并将原IP地址配置为MySQL集群的VIP地址,上层应用程序其实不需要更改连接My…

vue项目打包优化之-productionSourceMap设置

productionSourceMap 是一个用于配置生产环境下是否生成 source map 文件的选项。在 webpack 中&#xff0c;source map 文件是一种映射关系文件&#xff0c;可以将编译后的代码映射回原始源代码&#xff0c;方便开发者在调试时定位问题。 在生产环境中&#xff0c;通常不建议暴…