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

2024-03-30 07:36

本文主要是介绍Elment ui 动态表格与表单校验 列表数据 组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

效果:

代码 :

<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>

这篇关于Elment ui 动态表格与表单校验 列表数据 组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/860874

相关文章

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用vllm处理多模态数据的预处理技巧

《Python使用vllm处理多模态数据的预处理技巧》本文深入探讨了在Python环境下使用vLLM处理多模态数据的预处理技巧,我们将从基础概念出发,详细讲解文本、图像、音频等多模态数据的预处理方法,... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

MySQL 删除数据详解(最新整理)

《MySQL删除数据详解(最新整理)》:本文主要介绍MySQL删除数据的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、前言二、mysql 中的三种删除方式1.DELETE语句✅ 基本语法: 示例:2.TRUNCATE语句✅ 基本语

MyBatisPlus如何优化千万级数据的CRUD

《MyBatisPlus如何优化千万级数据的CRUD》最近负责的一个项目,数据库表量级破千万,每次执行CRUD都像走钢丝,稍有不慎就引起数据库报警,本文就结合这个项目的实战经验,聊聊MyBatisPl... 目录背景一、MyBATis Plus 简介二、千万级数据的挑战三、优化 CRUD 的关键策略1. 查

python实现对数据公钥加密与私钥解密

《python实现对数据公钥加密与私钥解密》这篇文章主要为大家详细介绍了如何使用python实现对数据公钥加密与私钥解密,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录公钥私钥的生成使用公钥加密使用私钥解密公钥私钥的生成这一部分,使用python生成公钥与私钥,然后保存在两个文

mysql中的数据目录用法及说明

《mysql中的数据目录用法及说明》:本文主要介绍mysql中的数据目录用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、版本3、数据目录4、总结1、背景安装mysql之后,在安装目录下会有一个data目录,我们创建的数据库、创建的表、插入的

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》:本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》:本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面,查看左下角从左

SpringBoot中4种数据水平分片策略

《SpringBoot中4种数据水平分片策略》数据水平分片作为一种水平扩展策略,通过将数据分散到多个物理节点上,有效解决了存储容量和性能瓶颈问题,下面小编就来和大家分享4种数据分片策略吧... 目录一、前言二、哈希分片2.1 原理2.2 SpringBoot实现2.3 优缺点分析2.4 适用场景三、范围分片