【elementUi】绘制自定义表格、绘制曲线表格
要求绘制下图系列表格:

实现步骤:
1.绘制树,实现树勾选字段—>表格绘制字段
逻辑: 树:@check-change=“treeChart.handleCheckChange” 绑定点击选择事件,改变data.column3数据项;表格:columns="data.column3"绑定相对应的data.column3实现表格列自定义;
2.绘制表格,表格中使用插槽去定义绘制曲线图< template >
逻辑:表格定义插槽,插槽中绘制一个div,div中的id 与绘制表格的自定义字段勾连起来,根据Id给对应的div绘制曲线图
1.绘制树的部分结构代码
<el-tree :data="treeChart.treedata"show-checkbox node-key="prop"@check-change="treeChart.handleCheckChange" :default-checked-keys="treeChart.TagNode"/>
对应的setup内代码

表的代码块
<el-table :columns="data.column3" :data="treeChart.ListChartTable || []" :border="true":resizable="true"highlight-currrent-row :show-overflow-tooltip="true"><el-table-column v-for=" ( item, index ) in data.column3 " :key="index" :prop="item.prop":width="item.width" :fixed="item.fixed" :sortable="item.sortable" :label="item.label":align="item.align" :formatter="item.formatter" :show-overflow-tooltip="true"><template v-slot="scope"><div :ref="'chartContainer-' + '-' + item.prop + scope.$index":id="'chart-' + item.prop + '-' + scope.$index" style="width: 120px; height: 50px;"></div></template></el-table-column>
</el-table>
勾选树和表格相连的逻辑处理
//复选框是否勾选handleCheckChange: async (treedata, checked, indeterminate) => {data.column3 = []; //存储自定义字段的数组if (checked) {if (!treedata.children) {treeChart.TagNode.push(treedata);}} else {treeChart.TagNode.forEach(function (item, index, arr) {if (item == treedata) {arr.splice(index, 1);}});}treeChart.TagNode.forEach((k, v) => {data.column3.push({label: k.label,prop: k.prop,visible: true,align: "center",width: "120",})});if (data.column3.length > 0) {renderCharts(); //加载曲线}},
加载曲线代码
//加载曲线 (采用ice的取值BDB数据,参考意义不大)const renderCharts = async () => {data.column3.forEach(item => {var i = 0;data.piecenoList.forEach(async pieceno => {const chartId = `chart-${item.prop}-` + i;i += 1;try {//调用接口获取数据var productPrx = await Chart.locate(pieceno); const mea = await productPrx.getPosMeasurementSeries(item.prop);drawChart(chartId, mea);} catch (e) {console.log("查询曲线失败", e);drawChart(chartId);}})});}
//绘制曲线const drawChart = async (chartId, mea) => {//mea自定义存储数据 存在y_data和x_data 两个数组数据if (mea) {var y_data = [];var x_data = [];for (let i = 0; i < mea.y_data.length; i++) {y_data.push(isFloat(mea.y_data[i]));}for (let j = 0; j < mea.x_data.length; j++) {x_data.push(isFloat(mea.x_data[j]));}} else {//给一个默认曲线x = [0, 1, 2, 3, 4];y = [1, 1, 1, 1, 1];}//绘制曲线var chart;var chartElement = document.getElementById(chartId);if (chartElement && chartElement.getAttribute('_echarts_instance_')) {// 存在 ECharts 曲线,执行 removeAttribute 操作chartElement.removeAttribute('_echarts_instance_');chart = echarts.init(document.getElementById(chartId));} else {chart = echarts.init(document.getElementById(chartId));}const option = {xAxis: {type: 'category',data: x_data,},yAxis: {type: 'value',max: function (value) { return value.max + 1 },min: function (value) { return value.min - 1 },},series: [{type: 'line',data: y_data,}]};chart.setOption(option);}
相关文章:
【elementUi】绘制自定义表格、绘制曲线表格
要求绘制下图系列表格: 实现步骤: 1.绘制树,实现树勾选字段—>表格绘制字段 逻辑: 树:check-change“treeChart.handleCheckChange” 绑定点击选择事件,改变data.column3数据项;表格:columns"data…...
使用 Python 中的 Langchain 从零到高级快速进行工程
大型语言模型 (LLM) 的一个重要方面是这些模型用于学习的参数数量。模型拥有的参数越多,它就能更好地理解单词和短语之间的关系。这意味着具有数十亿个参数的模型有能力生成各种创造性的文本格式,并以信息丰富的方式回答开放式和挑战性的问题。 ChatGPT 等法学硕士利用 T...
神经网络基础-神经网络补充概念-07-使用计算图求导
步骤 定义计算节点和操作: “x” 是输入变量。 “Add” 表示加法操作。 “Sub” 表示减法操作。 “Multiply” 表示乘法操作。 计算函数值: 首先,我们将 x0 的值代入计算图中,计算出函数的值。 反向传播计算导数: 我…...
docker常用指令
一、Docker指令 1、启动Docker :systemctl start docker 2、查看Docker状态:systemctl status docker 状态为active表示正在运行中 3、停止运行Docker:systemctl stop docker 4、重启Docker:systemctl restart docker 5、开机启动Docker:systemctl enable docker 二…...
【金融量化】对企业进行估值的方法有哪些?
估值的方法有哪些? 如何对企业进行估值?有2个方法估算。 1 绝对估值法 它是一种定价模型,用于计算企业的内在价值。 比如说你可以根据公司近N年的现金流情况。借此去预测未来N年的现金流情况。所有的现金流数据都可以在年报上查询到。最后…...
Qt+C++自定义控件仪表盘动画仿真
程序示例精选 QtC自定义控件仪表盘动画仿真 如需安装运行环境或远程调试,见文章底部个人QQ名片,由专业技术人员远程协助! 前言 这篇博客针对<<QtC自定义控件仪表盘动画仿真>>编写代码,代码整洁,规则&…...
怎样让音频速度变慢?请跟随以下方法进行操作
怎样让音频速度变慢?在会议录音过程中,经常会遇到主讲人语速过快,导致我们无法清晰听到对方说的内容。如果我们能够减慢音频速度,就能更好地记录对方的讲话内容。此外,在听到快速播放的外语或方言时,我们也…...
【C语言】常用的库和作用以及对应的函数
常规编程时: <stdio.h>:提供标准输入输出函数,例如printf、scanf、fprintf、fscanf等。 <stdlib.h>:提供常用的通用函数,例如内存管理函数(malloc、calloc、realloc、free)、随机数…...
Android 12.0 系统systemui下拉通知栏的通知布局相关源码分析
1.前言 在android12.0的系统rom开发中,在进行systemui中的下拉通知栏的布局自定义的时候,对于原生systemui的 系统的下拉通知栏的通知布局的了解也是非常重要的,接下来就来分析下相关的下拉通知栏的通知布局的相关 源码流程,了解这些才方便对通知栏的布局做修改 2.系统sy…...
java实现docx,pdf文件动态填充数据
一,引入pom 根据需求引入自己所需pom org.apache.poi poi 4.1.1 org.apache.poi poi-ooxml 4.1.1 org.jxls jxls 2.6.0 ch.qos.logback logback-core org.jxls jxls-poi 1.2.0 fr.opensagres.xdocreport fr.opensagres.xdocreport.core 2.0.2 fr.opensagres.xdocrep…...
【Python2】实现异步进程的创建、终止与资源回收
章节索引 前言〇、问题与难点一、进程、异步进程、线程 / 进程池二、最终的代码构成三、代码逻辑讲解四、扩展的知识后记 前言 由于业务需求,需要在服务中加入一个异步任务,执行大量的耗时计算操作,需求细节如下: Handler处理器…...
leetcode做题笔记79单词搜索
给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中,返回 true ;否则,返回 false 。 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中“相邻”单元格是那些水平相邻或垂直相…...
http库 之 OKHttpUtil
源码位置 方便实用,个人感觉不错 依赖 <dependency><groupId>io.github.admin4j</groupId><artifactId>common-http-starter</artifactId><version>0.7.5</version> </dependency>代码实践 /*** 通用http的pos…...
gitlab合并新项目和分支切换
一、新建项目 1、创建空白项目 2、先创建一个群组 3、编写群组信息 4、创建群组完成以后新建项目 二、将代码推送到gitlab 1、初始化 git init 2、关联gitlab地址 # 比如:http://192.168.139.128:7070/cloud/obwt_cloud.git git remote add origin <你…...
WebStorm修改默认打开的浏览器
有两种方式第一种修改系统默认浏览器 我采用的是下面这种,在webstorm中修改 将浏览器设置为默认的浏览器即可...
vue3+vite+pinia
目录 一、项目准备 1.1、Vite搭建项目 1.2、vue_cli创建项目 二、组合式API(基于setup) 2.1、ref 2.2、reactive 2.3、toRefs 2.4、watch和watchEffect 2.5、computed 2.6、生命周期钩子函数 2.7、setup(子组件)的第一个参数-props 2.8、setup(子组件)的第二个参数…...
ROSpider机器人评测报告
ROSpider机器人评测报告 最近入手了一款ROSpider六足仿生机器人,ROSpider是一款基于ROS 操作系统开发的智能视觉六足机器人。 外观 外观上ROSpider六足机器人如同名字一样有六只机械腿,整体来看像一只六腿的蜘蛛。腿上的关节处用了明亮的橙黄色很是显…...
在vue3 中,使用element-plus中的el-scrollbar,让内容元素自动滚动
在vue3 中,使用element-plus中的el-scrollbar,在el-scrollbar中如果元素过大出现滑动,就自动滑动,到底部时就返回顶部重新向下滑动,鼠标放入框内停止滑动 模板部分: <template><el-scrollbar…...
Redis——Redis.conf详解+Redis持久化(RDB和AOF)+Redis订阅发布
配置文件 redis启动时通过配置文件启动 原生配置文件全文在网上随便搜索一下就能找到了。 单位 配置文件 unit单位 对大小写不敏感 包含 类比import,将其他的配置文件引入 网络 bind 127.0.0.1 // 绑定ip protected-mode yes //是否受保护 po…...
16.1.2 Linux 的多用户多任务环境
在 Linux 下面执行一个指令时,系统会将相关的权限、属性、程序码与数据等均载入内存, 并给予这个单元一个程序识别码 (PID),最终该指令可以进行的任务则与这个 PID 的权限有关。根据这个说明,我们就可以简单…...
51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
热烈祝贺埃文科技正式加入可信数据空间发展联盟
2025年4月29日,在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上,可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞,强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...
【HarmonyOS 5】鸿蒙中Stage模型与FA模型详解
一、前言 在HarmonyOS 5的应用开发模型中,featureAbility是旧版FA模型(Feature Ability)的用法,Stage模型已采用全新的应用架构,推荐使用组件化的上下文获取方式,而非依赖featureAbility。 FA大概是API7之…...
在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南
在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点(小球运动模拟)6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...
