二维table表的快速使用

<el-table :data="sentimentData" style="width: 680px"><el-table-columnfixedprop="name"label="区域"width="100"><template slot-scope="scope">{{ scope.row.name }}</template></el-table-column><el-table-column v-for="item in areaName" :key="item.index":prop="item.nano":label="item.name"width="100"><!-- 最重要的 scope.row[item.nano] 没有 [] 渲染不出来数据--><template slot-scope="scope">{{ scope.row[item.nano] }}  <!-- 动态数据方式 scope.row[item.nano] --></template></el-table-column></el-table><!--sentimentData和areaName数组数据-->areaName:[ {name:'南海诸岛', nano: 'NH'},{name:'北京市', nano: 'BJ'},{name:'天津市', nano: 'TJ'}, {name:'上海市', nano: 'SH'}, {name:'重庆市', nano: 'CQ'},{name:'河北省', nano: 'HB'}, {name:'河南省', nano: 'HNB'}, {name:'云南省', nano: 'YN'}, {name:'辽宁省', nano: 'LN'}, {name:'黑龙江省', nano: 'HLJ'}, {name:'湖南省', nano: 'HNS'}, {name:'安徽省', nano: 'AH'}, {name:'山东省', nano: 'SD'}, {name:'新疆省', nano: 'XJ'}, {name:'江苏省', nano: 'JS'}, {name:'浙江省', nano: 'ZJ'}, {name:'江西省', nano: 'JX'}, {name:'湖北省', nano: 'HB'}, {name:'广西省', nano: 'GX'}, {name:'甘肃省', nano: 'GS'},{name:'山西省', nano: 'SX'}, {name:'内蒙古省', nano: 'NMG'}, {name:'陕西省', nano: 'SX'}, {name:'吉林省', nano: 'JL'}, {name:'福建省', nano: 'FJ'}, {name:'贵州省', nano: 'GZ'}, {name:'广东省', nano: 'GD'}, {name:'青海省', nano: 'QH'}, {name:'西藏省', nano: 'XZ'}, {name:'四川省', nano: 'SC'}, {name:'宁夏省', nano: 'NX'}, {name:'海南省', nano: 'HN'}, {name:'台湾省', nano: 'TW'}, {name:'香港', nano: 'XG'}, {name:'澳门', nano: 'AM'}],sentimentData: [{ name: '全部', NH: 123, BJ: 152, TJ: 253, SH: 253, CQ: 825, HB: 248, YN: 4785, LN: 856, HLJ: 845, HNS: 965, AH: 542, SD: 856, XJ:968,JS: 856, ZJ: 562, JX: 895, HB: 456, GX: 325, GS: 652, NMG:251, SX: 654, JL: 765,FJ: 965, FJ: 523, GZ: 745,GD: 210, QH: 120, XZ: 304, SC:175,NX: 412, HNB: 142,TW: 325, XG: 684, AM: 4514},{ name: '农事事件', NH: 1154, BJ: 152, TJ: 253, SH: 253, CQ: 825, HB: 248, YN: 4785, LN: 856, HLJ: 845, HNS: 965, AH: 542, SD: 856, XJ:968,JS: 856, ZJ: 562, JX: 895, HB: 456, GX: 325, GS: 652, NMG:251, SX: 654, JL: 765,FJ: 965, FJ: 523, GZ: 745,GD: 210, QH: 120, XZ: 304, SC:175,NX: 412, HNB: 142,TW: 325, XG: 684, AM: 4514},{ name: '其他', NH: 1456, BJ: 152, TJ: 253, SH: 253, CQ: 825, HB: 248, YN: 4785, LN: 856, HLJ: 845, HNS: 965, AH: 542, SD: 856, XJ:968,JS: 856, ZJ: 562, JX: 895, HB: 456, GX: 325, GS: 652, NMG:251, SX: 654, JL: 765,FJ: 965, FJ: 523, GZ: 745,GD: 210, QH: 120, XZ: 304, SC:175,NX: 412, HNB: 142,TW: 325, XG: 684, AM: 4514}]//设置指定行、列、具体单元格颜色cellStyle({row, column, rowIndex, columnIndex}){ if(columnIndex === 0){ //指定坐标rowIndex :行,columnIndex :列return 'background: #D3D3D3' }else {return ''}},//双击修改方法handleCellDblclick(row, column, cell, event) {if (column.label !== null && column.label !== "") {  //column.label !== ""避免双击第一列双击this.Dialog = true;this.Title = column.labelthis.xxx = row[column.property]  //内容 row[column.property]}},      

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

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

相关文章

Linux4.7、环境变量

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 基本概念 见见环境变量 指令原理 常见环境变量及其测试 环境变量相关指令 环境变量组织方式 通过代码获取环境变量 通过系统变量获取环境变量以及设置环境变量 环境变量的全局属性 基本概念 首先&#xff0c;…

什么?居然可以免费使用Jetbrains?!

JetBrains是一家捷克的软件开发公司&#xff0c;该公司位于捷克的布拉格&#xff0c;并在俄罗斯的圣彼得堡及美国麻州波士顿都设有办公室&#xff0c;该公司最为人所熟知的产品是Java编程语言开发撰写时所用的集成开发环境&#xff1a;IntelliJ IDEA。 如下是jetbrains旗下的产…

【笔记】Clion 中运行 C/C++11 之 CMakeLists.txt 的配置

该文章记录第一次使用 Clion 时&#xff0c;对 CMakeLists 的配置&#xff0c;使其能够运行 C/C11 的代码。 一. CMakeLists.txt 的配置 1、首先我们在需要新建一个项目 2、填写新建项目相关的信息 3、修改 CMakeLists.txt 文件内容 替换文本&#xff1a; # 使用此 CMakeLis…

帆软报表不能增加SAP连接方式 通过插件一致性检测 同步至本地解决

帆软报表开发人员需要增加一个SAP数据连接方式&#xff1a;SAP_ECC_600环境 在服务器端不能直接增加&#xff0c;而在帆软报表设计器切换到远程模式时&#xff0c;又不能显示SAP连接&#xff0c;导致不能增加。 解决&#xff1a;重新进入帆软报表报计器时报以下错误&#xff0c…

开源运维监控系统-Nightingale(夜莺)应用实践(未完)

一、前言 某业务系统因OS改造,原先的Zabbix监控系统推倒后未重建,本来计划用外部企业内其他监控系统接入,后又通知需要自建才能对接,考虑之前zabbix的一些不便,本次计划采用一个类Prometheus的监控系统,镜调研后发现Nightingale兼容Prometheus,又有一些其他功能增强,又…

jvm的2种赋值机制

jvm两种赋值机制&#xff1a; 1 基本类型赋值 值传递&#xff1a;值拷贝 这个值就是数据&#xff0c;而且相互不影响 独立空间 栈中 int n110; n2n1; n280; //n2的变化不会影响n…

java封装详解

/*** Description 封装详解*/ package com.oop;import com.oop.demo04.Student; /*1.提高程序的安全性&#xff0c;保护数据2.隐藏代码的实现细节3.统一接口4.系统可维护增加了*/ public class Application {public static void main(String[] args) {Student s1 new Student(…

从马帮到金蝶云星空通过接口配置打通数据

从马帮到金蝶云星空通过接口配置打通数据 接入系统&#xff1a;马帮 上海马帮科技有限公司&#xff0c;是一家专注于提供全流程跨境电商ERP管理软件解决方案的企业。聚焦服务于各阶段、各领域的跨境电商从业者&#xff0c;旗下包含专业版ERP、亚马逊专用版ERP、东南亚海外版ERP…

JavaScript空值合并运算符

The Nullish Coalescing Operator&#xff08;空值合并运算符&#xff09;是一种 JavaScript 的新运算符&#xff0c;用于解决默认值设定中存在的一些问题。它的语法为 ??&#xff08;两个问号&#xff09;&#xff0c;表示当左侧的操作数为 null 或 undefined 时&#xff0c…

【java+vue+微信小程序项目】从零开始搭建——健身房管理平台(1)spring boot项目搭建、vue项目搭建、微信小程序项目搭建

项目笔记为项目总结笔记,若有错误欢迎指出哟~ 【项目专栏】 【java+vue+微信小程序项目】从零开始搭建——健身房管理平台(1)项目搭建 持续更新中… java+vue+微信小程序项目】从零开始搭建——健身房管理平台 项目简介Java项目搭建(IDEA)1.新建项目2.项目类型3.项目设置4…

mysql基础语句

【select查询】 1、Select * from 表名; 查询 例&#xff1a; Where 限定的条件查询 AND 连接两个或者多个查询条件 OR 连接两个或者多个查询条件&#xff0c;满足其中一个就可以查询出 2、Select * from 表名 where 字段 某某条件&#xff1b; 例&#xff1a; 3、Selec…

Python 数据处理与分析之 Pandas 库

介绍 Pandas&#xff08;Python Data Analysis Library&#xff09;是一个流行的 Python 第三方库&#xff0c;是数据处理和数据分析中不可或缺的工具之一&#xff0c;用于数据处理和数据分析。它提供了高效的数据分析方法和灵活且高效的数据结构。相比于其他的数据处理库&…

EasyRecovery易恢复2024最新免费版电脑数据恢复软件功能介绍

EasyRecovery从&#xff08;易恢复2024&#xff09;支持恢复不同存储介质数据&#xff0c;在Windows中恢复受损和删除文件,以及能检索数据格式化或损坏卷&#xff0c;甚至还可以从初始化磁盘。同时&#xff0c;你只需要最简单的操作就可以恢复数据文件&#xff0c;如&#xff1…

kubeadm 安装k8s1.28.x 底层走containerd 容器

1. k8s1.28.x 的概述 1.1 k8s 1.28.x 更新 Kubernetes v1.28 是 2023 年的第二个大版本更新&#xff0c;包含了 46 项主要的更新。 而今年发布的第一个版本 v1.27 有近 60 项&#xff0c;所以可以看出来&#xff0c;在发布节奏调整后&#xff0c; 每个 Kubernetes 版本中都会包…

DeepSort知识整理:余弦距离和马氏距离 (一)

一、余弦距离 1.1 余弦相似度 余弦相似度是用来衡量两个非零向量之间的夹角的余弦值。对于两个向量 A A A 和 B B B&#xff0c;余弦相似度的计算公式为&#xff1a; C o s i n e S i m i l a r i t y ( A , B ) A ⋅ B ∥ A ∥ ∥ B ∥ {\rm{Cosine Similarity }}\left( …

maven篇---第二篇

系列文章目录 文章目录 系列文章目录前言一、什么是Maven的坐标?二、讲一下maven的生命周期三、说说你熟悉哪些maven命令?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的…

离散型制造业生产管理mes系统介绍

典型的离散制造业主要包括机械、电子、航空、汽车等行业&#xff0c;这些企业既有按订单生产&#xff0c;也有按库存生产&#xff0c;既有批量生产&#xff0c;也有单件小批生产。那么&#xff0c;注重生产计划的制定&#xff0c;生产的快速响应是离散行业MES系统应用的关键。 …

两道面试题秒杀你的C++基础!

大家好&#xff0c;我是光城&#xff0c;今天发两个非常重要的面试题&#xff0c;可以留言区说出你的答案&#xff0c;这两个题目都比较重要&#xff0c;看你能答对不&#xff1f; 1.C中初始化变量有几种方式&#xff0c;各自有什么区别&#xff1f; 或者说Initialization分为哪…

Ubuntu 安装高版本FFmpeg

使用第三方PPA 源来安装: FFmpeg 5 sudo add-apt-repository ppa:savoury1/ffmpeg4 sudo add-apt-repository ppa:andykimpe/ffmpeg5 sudo apt-get update sudo apt-get install ffmpeg详见 https://launchpad.net/~andykimpe/archive/ubuntu/ffmpeg5 FFmpeg 6 sudo add-ap…

【已验证】SqlBulkCopy 执行批量插入的时候报超时问题-解决办法

把datatable里面的数据插入到数据库&#xff0c;但是数据量大的情况下批量插入会提示超时&#xff0c;所以把datatable的数据分批写入数据库的 using (SqlConnection connection new SqlConnection(ConnectionString)){connection.Open();int pageSize 100000;//SqlBulkCopy大…