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

news2024/11/10 21:22:16

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) => {
  debugger
  if (!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] = val
    props.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 = true
    dropdownStyle.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 = false
    dropdownStyle.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.coloradmin.cn/o/1904521.html

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

相关文章

Hi6276 无Y应用电源方案IC

Hi6276 combines a dedicated current mode PWM controller with integrated high voltage power MOSFET.Vcc low startup current and low operating current contribute to a reliable power on startup design with Hi6276. the IC operates in Extended ‘burst mode’ to …

Python【打包exe文件两步到位】

Python打包Exe 安装 pyinstaller&#xff08;pip install pyinstaller&#xff09; 执行打包命令&#xff08;pyinstaller demo.py&#xff09; 打完包会生成 dist 文件夹&#xff0c;如下如

Linux muduo 网络库

主要记录示意图和知识点框架&#xff1a; 1、阻塞、非阻塞、同步、异步 在处理IO的时候&#xff0c;阻塞和非阻塞都是同步IO&#xff0c;只有使用了特殊的API才是异步IO。 2、五种IO模型&#xff1a; 阻塞、非阻塞、IO复用、信号驱动、异步IO 3、muduo网络库 muduo网络库给用…

AiPPT的成功之路:PMF付费率与增长策略

如果要给 2023 年的 AI 市场一个关键词&#xff0c;那肯定是“大模型”&#xff0c;聚光灯和大家的注意力、资金都投向了那些大模型公司&#xff1b;而如果要给 2024 年的 AI 市场一个关键词&#xff0c;则一定是 PMF&#xff08;产品市场契合&#xff09;。如果没有 PMF&#…

【pyhont报错已解决】ERROR: Could not find a version that satisfies the requirement

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 一、问题描述1.1 报错示例1.2 报错分析1.3 解决思路 二、解决方法2.1 方法一&#xff1a;检查软件包版本和依赖2.2 方…

时钟资源(参考ug472)

目录 时钟资源(参考ug472)7系列 FPGA 时钟连接差异时钟资源连接关系表时钟资源连接示意图不同时钟区域资源连接图Clock-Capable Inputs介绍布局规则 全局时钟 bufferBUFGCTRL介绍原语参数及端口INIT_OUTPRESELECT_I0/1I0/1CE0/1S0/1IGNORE0/1 真值表时序 BUFGBUFGCE&#xff0c…

Ubuntu18.04安装AutoWare.ai(完整版)

目录 一、安装Opencv 1.1 下载安装包Opencv官网 1.2 安装opencv_contrib 二、安装Ros和rosdepc 三、安装Eigen库 1. 解压文件 2. 安装Eigen 四、安装Autoware.ai-1.14.0 4.1 安装依赖 4.2 下载Autoware.ai 1.在home路径下打开终端输入以下命令&#xff1a; 2.下载源码…

【VirtualBox】AMD(R9-7940)芯片安装Mac OS12.0.1 Monterey

系统、软件&#xff1a; macos12.0.1 ISO文件&#xff1b;virtual box&#xff08;7.0.18&#xff09;以及扩展包&#xff08;官网下载即可&#xff09;&#xff1b;AMD R9-7940HS;Windows 11 professional&#xff1b;GenSMBIOS&#xff08;github&#xff09;&#xff1b;po…

第1节、基于太阳能的环境监测系统——MPPT充电板

一、更新时间&#xff1a; 本篇文章更新于&#xff1a;2024年7月6日23:33:30 二、内容简介&#xff1a; 整体系统使用太阳能板为锂电池充电和系统供电&#xff0c;天黑后锂电池为系统供电&#xff0c;本节主要介绍基于CN3722的MPPT太阳能充电模块&#xff0c;这块主要是硬件…

判断是否为完全二叉树

目录 分析 分析 1.完全二叉树的概念&#xff1a;对于深度为K的&#xff0c;有n个结点的二叉树&#xff0c;当且仅当其每一个结点都与深度为K的满二叉树中编号从1至n的结点一一对应时称之为完全二叉树。 要注意的是满二叉树是一种特殊的完全二叉树。 2.思路&#xff1a;可以采…

用户身份和文件权限

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、用户身份与能力 二、文件权限与归属 三、文件的特殊权限 四、文件的隐藏属性 五、文件访问控制列表 六、su命令和sudo服务 致谢 一、…

什么是CTO?如何成为一名优秀的CTO?

一、什么是CTO&#xff1f; 首席技术官&#xff08;CTO&#xff09;是一位负责领导和管理企业技术战略的高级职务。CTO的主要职责包括规划技术战略、监督研发活动、领导技术团队等。 二、CTO的主要职责 首席技术官&#xff0c;即CTO&#xff0c;是企业中负责技术和研发的高级管…

【漏洞复现】Emlog Pro 2.3.4——任意用户登入、会话持久化(CVE-2024-5044)

声明&#xff1a;本文档或演示材料仅供教育和教学目的使用&#xff0c;任何个人或组织使用本文档中的信息进行非法活动&#xff0c;均与本文档的作者或发布者无关。 文章目录 漏洞描述漏洞复现 漏洞描述 漏洞编号&#xff1a;CVE-2024-5044 漏洞成因&#xff1a; 在Emlog Pro …

flutter开发实战-Charles抓包设置,dio网络代理

flutter开发实战-Charles抓包设置 在开发过程中抓包&#xff0c;可以看到请求参数等数据&#xff0c;方便分析问题。flutter上使用Charles抓包设置。dio需要设置网络代理。 一、dio设置网络代理 在调试模式下需要抓包调试&#xff0c;所以需要使用代理&#xff0c;并且仅用H…

cross attention交叉熵注意力机制

交叉注意力(Cross-Attention)则是在两个不同序列上计算注意力&#xff0c;用于处理两个序列之间的语义关系。在两个不同的输入序列之间计算关联度和加权求和的机制。具体来说&#xff0c;给定两个输入序列&#xff0c;cross attention机制将一个序列中的每个元素与另一个序列中…

机器学习与现代医疗设备的结合:革新医疗健康的未来

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言 随着技术的不断进步&#xff0c;机器学习&#xff08;Machine Learning, ML&#xff09;在现代医疗设备中的应用正在改变着…

基于B/S模式和Java技术的生鲜交易系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;B/S模式、Java技术 工具&#xff1a;Visual Studio、MySQL数据库开发工具 系统展示 首页 用户注册…

如何在应用运行时定期监控内存使用情况

如何在应用运行时定期监控内存使用情况 在 iOS 应用开发中&#xff0c;实时监控内存使用情况对于优化性能和排查内存泄漏等问题非常重要。本文将介绍如何在应用运行时定期监控内存使用情况&#xff0c;使用 Swift 编写代码并结合必要的工具和库。 1. 创建桥接头文件 首先&…

线程安全的原因及解决方法

什么是线程安全问题 线程安全问题指的是在多线程编程环境中&#xff0c;由于多个线程共享数据或资源&#xff0c;并且这些线程对共享数据或资源的访问和操作没有正确地同步&#xff0c;导致数据的不一致、脏读、不可重复读、幻读等问题。线程安全问题的出现&#xff0c;通常是…

论文略读:Can Long-Context Language Models Subsume Retrieval, RAG, SQL, and More?

202406 arxiv 1 intro 传统上&#xff0c;复杂的AI任务需要多个专门系统协作完成。 这类系统通常需要独立的模块来进行信息检索、问答和数据库查询等任务大模型时代&#xff0c;尤其是上下文语言模型&#xff08;LCLM&#xff09;时代&#xff0c;上述问题可以“一体化”完成…