维护el-table列，循环生成el-table

1、lib/setting.js（维护table列）

const columns=[{ label: '类型', prop: 'energyName', width: '150', isText: true },{ label: '消耗量(t或10⁴m³)', prop: 'inputNum', isInput: true },{label: 'CO₂',children: [// { label: '核算因子', prop: 'co2FactorValue', width: '120', isShow: false },{ label: '排放量', prop: 'co2Value', width: '120' },{ label: '排放因子', prop: 'co2FactorType', isSelect: true }]},{label: 'CH₄',children: [// { label: '核算因子', prop: 'ch4FactorValue', width: '120' },{ label: '排放量', prop: 'ch4Value', width: '120' },{ label: '排放因子', prop: 'ch4FactorType', isSelect: true }]},{label: 'N₂O',children: [{ label: '排放量', prop: 'n2oValue', width: '120' },{ label: '排放因子', prop: 'n2oFactorType', isSelect: true }]}]

2、customTable.vue

<template><slot name="title"> </slot>
<!-- show-summary  --><el-table :data="tableData" show-summary style="width: 99%;" class="elTable"><el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label" :width="column.width"><template v-if="!column.children" #default="scope"><div>{{ column.isText ? scope.row[column.prop] : "" }}<el-input v-if="column.isInput" v-model="scope.row[column.prop]" @change="inputNum(scope.row)" :disabled="props.isDetail"/><input-select-module v-if="column.isSelect"></input-select-module></div></template><template v-if="column.children"><el-table-column v-for="(subColumn, subIndex) in column.children"  :key="subIndex" :prop="subColumn.prop" :label="subColumn.label" :width="subColumn.width"><template #default="scope"><el-input v-if="subColumn.isInput" v-model="scope.row[subColumn.prop]" :disabled="props.isDetail"/><input-select-module v-if="subColumn.isSelect" v-model:row="scope.row" v-model:disabled="props.isDetail" v-model:subColumn="subColumn.prop" @changeFactorValue="changeFactorValue(scope.row, scope.row[subColumn.prop])"></input-select-module></template></el-table-column></template></el-table-column></el-table>
</template>

在这里插入图片描述

做了个自定义组件
组件描述：选择值为缺省值时，该组件为下拉框，选择值为自测值时，组件为输入框

<template><div><!-- v-model="props.inputVal" --><el-input type="text" v-model="props.row[props.subColumn]" @change="changeInput(props.row[props.subColumn])"id="input-select" @click="click" :readonly="inputReadonly" style="position: relative" /><div class="dropdown" :style="dropdownStyle"><div class="dropdown-item" data-value="自测值" @click="clickdropdown('自测值')">自测值</div><div class="dropdown-item" data-value="缺省值" @click="clickdropdown('缺省值')">缺省值</div></div></div>
</template><script setup>
import { ref, defineEmits, watch } from 'vue'const props = defineProps({subColumn: {type: String,required: true},row: {type: Object,required: true},disabled: {type: Boolean,},
})const emit = defineEmits(['changeFactorType'])const inputReadonly = ref(true)
const dropdownStyle = ref({ display: 'none' })window.addEventListener('click', (event) => {if (!props.disabled) {if (event.target.id != 'input-select') {dropdownStyle.value = { display: 'none' }} else {}}
})
window.addEventListener('scroll', function () {for (var i = 0; i < document.getElementsByClassName("dropdown").length; i++) {document.getElementsByClassName("dropdown")[i].style.display = 'none';}
}, true)const click = (event) => {debuggerif (!props.disabled) {for (var i = 0; i < document.getElementsByClassName('dropdown').length; i++) {document.getElementsByClassName('dropdown')[i].style.display = 'none'}var rect = event.target.getBoundingClientRect();// 打印元素的位置let top=rect.top+32;let left=rect.left-10;dropdownStyle.value = {display: 'block',position: 'fixed',top:top+'px',left:left+"px",border: '#909399 1px solid','border-radius': '4px',background: '#fff','z-index': '100',width: '150px'}}
}// 选择自测值,缺省值,控制下拉框显隐
// 选择:缺省值-计算方式:消耗量*默认核算因子
// 选择:自测值-排放因子输入框清空,手动填写
const clickdropdown = (val) => {dropdownStyle.value = { display: 'none' }if (val == '缺省值') {props.row[props.subColumn] = valprops.subColumn == 'co2FactorType'? (props.row.co2Value = props.row.inputNum * props.row.co2FactorValue): props.subColumn == 'ch4FactorType'? (props.row.ch4Value = props.row.inputNum * props.row.ch4FactorValue): (props.row.n2oValue = props.row.inputNum * props.row.n2oFactorValue)inputReadonly.value = truedropdownStyle.value = { display: 'none' }} else if (val == '自测值') {props.subColumn == 'co2FactorType'? (props.row.co2Value = ''): props.subColumn == 'ch4FactorType'? (props.row.ch4Value = ''): (props.row.n2oValue = '')props.row[props.subColumn] = ''inputReadonly.value = falsedropdownStyle.value = { display: 'none' }}
}// 排放因子为自测值时,计算排放量,计算公式:消耗量 * 排放因子
const changeInput = (value) => {if (value != '自测值' && value != '缺省值') {if (!/^-?\d+(\.\d+)?$/.test(value)) {ElMessage.error('输入不合法')props.row[props.subColumn] = ''props.subColumn == 'co2FactorType'? (props.row.co2Value = ''): props.subColumn == 'ch4FactorType'? (props.row.ch4Value = ''): (props.row.n2oValue = '')} else if (props.row.inputNum != '') {props.subColumn == 'co2FactorType'? (props.row.co2Value = props.row.inputNum * value): props.subColumn == 'ch4FactorType'? (props.row.ch4Value = props.row.inputNum * value): (props.row.n2oValue = props.row.inputNum * value)}}
}</script><style>
.dropdown {border: #3f3f3f 1px solid;position: absolute;width: 120px;
}.dropdown-item {cursor: pointer;text-indent: 8px;
}
</style>

在这里插入图片描述

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

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

相关文章

cs231n作业1——Softmax

cs231n作业1——Softmax

参考文章&#xff1a;cs231n assignment1——softmax Softmax softmax其实和SVM差别不大&#xff0c;两者损失函数不同&#xff0c;softmax就是把各个类的得分转化成了概率。 损失函数&#xff1a; def softmax_loss_naive(W, X, y, reg):loss 0.0dW np.zeros_like(W)num_…
阅读更多...
【Linux】进程的概念 + 查看进程

【Linux】进程的概念 + 查看进程

前言&#xff1a; 在前面我们学习了Liunx的基本指令和权限相关知识&#xff0c;还有基本工具的使用&#xff0c;有了以上的基础知识我们本章将正式接触Linux操作系统。 目录 1.冯诺依曼体系结构1.1 内存存在的意义1.2 程序加载到内存的含义1.3 程序的预加载&#xff1a; 2 .认识…
阅读更多...
安卓备忘录App开发

安卓备忘录App开发

安卓备忘录APP开发，文章末尾有源码和apk安装包 目标用户: 普通安卓手机用户，需要一个简单易用的备忘录App来记录和管理日常事务。 主要功能: 用户注册: 用户可以创建一个账号，输入用户名和密码。 用户登录: 用户可以通过用户名和密码登录到应用。 用户信息存储: 用户名和…
阅读更多...
TCP一定可靠吗

TCP一定可靠吗

背景 公司某个服务发送TCP报文后，得到的响应是非预期数据 原因竟然是：TCP包的 payload 数据某个bit位被翻转，但是 checksum 的值一样，错误的包被分发给了上层服务 Checksum介绍 IP 头有自己的 Checksum，TCP、UDP 也有自己的 Checksum，分别校验不同部分的数据 IP 头的 …
阅读更多...
聚星文社一键生成工具绘唐3科技AI工具

聚星文社一键生成工具绘唐3科技AI工具

聚星文社一键生成工具绘唐3科技AI工具 绘唐3.0——用户文档 - 飞书云文档 聚星文社一键生成工具绘唐3科技AI工具是一个基于人工智能技术的辅助创作工具&#xff0c;可以帮助用户快速生成有关唐朝科技的文本内容。该工具利用自然语言处理和机器学习等技术&#xff0c;通过输入一…
阅读更多...
帕金森病患者在选择运动疗法时应该注意哪些事项？

帕金森病患者在选择运动疗法时应该注意哪些事项？

帕金森病患者在选择运动疗法时&#xff0c;应该遵循以下几点注意事项&#xff1a; 个性化运动处方&#xff1a;根据患者的病情、年龄、健康状况、以往运动能力等因素&#xff0c;制定个体化的运动处方。 避免运动负荷过大&#xff1a;运动时间不宜过长&#xff0c;注意控制心率…
阅读更多...
JavaWeb-【1】HTML

JavaWeb-【1】HTML

笔记系列持续更新，真正做到详细！！本次系列重点讲解后端，那么第一阶段先讲解前端 目录 1、Javaweb技术体系 2、BS架构说明 3、官方文档 4、网页组成 5、HTML 6、HTML快速入门 7、HTML基本结构 8、HTML标签 ​9、HTML标签使用细节 ①、font标签 ②、字符实体 ③、标…
阅读更多...
SSM养老院管理系统-计算机毕业设计源码02221

SSM养老院管理系统-计算机毕业设计源码02221

摘要 本篇论文旨在设计和实现一个基于SSM的养老院管理系统&#xff0c;旨在提供高效、便捷的养老院管理服务。该系统将包括老人档案信息管理、护工人员管理、房间信息管理、费用管理等功能模块&#xff0c;以满足养老院管理者和居民的不同需求。 通过引入SSM框架&#x…
阅读更多...
通过消息传递同步操作

通过消息传递同步操作

通信顺序进程&#xff08;CSP&#xff09; 是一种形式语言&#xff0c;用来描述并发性系统间进行交互的模式 每个线程或进程独立运行&#xff0c;它们之间仅通过消息传递进行通信&#xff0c;而不是直接共享状态 每个线程实际上都是一个状态机&#xff1a;当它接收到一条消息时…
阅读更多...
【数据结构】05.双向链表

【数据结构】05.双向链表

一、双向链表的结构 注意&#xff1a;这里的“带头”跟前面我们说的“头节点”是两个概念&#xff0c;带头链表里的头节点&#xff0c;实际为“哨兵位”&#xff0c;哨兵位节点不存储任何有效元素&#xff0c;只是站在这里“放哨的”。 “哨兵位”存在的意义&#xff1a;遍历循…
阅读更多...
人工智能系列-Pandas基础

人工智能系列-Pandas基础

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” Pandas简介 Pandas是Python语言的拓展程序库&#xff0c;用于数据分析。 Pandas是一个开放源码&#xff0c;BSD许可的库&#xff0c;提供高性能&#xff0c;易于使用的数据结…
阅读更多...
YOLO V7网络实现细节（2）—网络整体架构总结

YOLO V7网络实现细节（2）—网络整体架构总结

YOLO V7网络整体架构总结 YOLO v7网络架构的整体介绍 不同GPU和对应模型&#xff1a; ​​​​​​​边缘GPU&#xff1a;YOLOv7-tiny普通GPU&#xff1a;YOLOv7​​​​​​​云GPU的基本模型&#xff1a; YOLOv7-W6 激活函数&#xff1a; YOLOv7 tiny&#xff1a; leaky R…
阅读更多...
vue项目实现堆叠卡片拖动切换效果

vue项目实现堆叠卡片拖动切换效果

实际效果 实现流程 1. 实现卡片位置堆叠 将父元素的 position 设置成relative &#xff0c;卡片的position 设置成 absolute 即可。 2. 消除图片的移动 如果卡片上有图片&#xff0c;默认拖动的时候就会导致像上图一样变成了选中图片移动&#xff0c;从而没法触发拖动事件。消…
阅读更多...
苹果电脑能玩赛博朋克2077吗 如何在mac上运行赛博朋克2077 crossover能玩什么游戏

苹果电脑能玩赛博朋克2077吗 如何在mac上运行赛博朋克2077 crossover能玩什么游戏

各位喜欢赛博朋克风的一定不能错过《赛博朋克2077》。那么《赛博朋克2077》是一款什么样的游戏&#xff1f;《赛博朋克2077》在苹果电脑上可以运行吗&#xff1f;一起来看看介绍吧。 一、《赛博朋克2077》是一款什么样的游戏&#xff1f; 《赛博朋克2077》是一款由CD Projekt …
阅读更多...
MIT6.s081 2021 Lab Traps

MIT6.s081 2021 Lab Traps

使用gdb调试xv6内核 从最近两个 Lab 开始&#xff0c;代码逻辑的复杂度明显上升&#xff0c;对内核进行调试可能是帮助理解操作系统机制的绝佳方法。因此在开始本 Lab 之前&#xff0c;我们先来配置一下针对 xv6 内核的 gdb 调试器。 安装 gdb-multiarch. 利用包管理工具进行…
阅读更多...
基于Maximin的异常检测方法（MATLAB）

基于Maximin的异常检测方法（MATLAB）

异常存在于各个应用领域之中&#xff0c;往往比正常所携带的信息更多也更为重要。例如医疗系统中疾病模式&#xff0c;信用卡消费中的欺诈行为&#xff0c;数据库中数据泄露&#xff0c;大型机器故障&#xff0c;网络入侵行为等。大数据技术体系的快速兴起与发展&#xff0c;加…
阅读更多...
【React Native优质开源项目】

【React Native优质开源项目】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…
阅读更多...
字符串——string类的常用接口

字符串——string类的常用接口

一、string类对象的常见构造 二、string类对象的容量操作 三、string类对象的访问及遍历操作 四、string类对象的修改操作 一、string类对象的常见构造 1.string() ——构造空的string类对象&#xff0c;也就是空字符串 2.string(const char* s) ——用字符串来初始化stri…
阅读更多...
【Linux】压缩命令——gzip，bzip2，xz

【Linux】压缩命令——gzip，bzip2，xz

1.压缩文件的用途与技术 你是否有过文件太大&#xff0c;导致无法以正常的E-mail方式发送&#xff1f;又或学校、厂商要求使用CD或DVD来做数据归档之用&#xff0c;但是你的单一文件却都比这些传统的一次性存储媒介还要大&#xff0c;那怎么分成多块来刻录&#xff1f;还有&am…
阅读更多...
【QT】显示类控件

【QT】显示类控件

显示类控件 显示类控件1. label - 标签2. LCD Number - 显示数字的控件3. ProgressBar - 进度条4. Calendar Widget - 日历5. Line Edit - 输入框6. Text Edit - 多行输入框7. Combo Box - 下拉框8. Spin Box - 微调框9. Date Edit & Time Edit - 日期微调框10. Dial - 旋钮…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023