vue+element实现多级表头加树结构

标题两种展示方式

方式一

在这里插入图片描述
完整代码:

<template><div class="box"><el-tableref="areaPointTable":data="tableData"border:span-method="objectSpanMethod":header-cell-style="tableHeaderMerge"><el-table-column:prop="item.prop?item.prop:''":label="item.titleName"align="center"v-for="(item, index) in tableHeader":key="index"><template slot-scope="{ row, column, $index }"><spanv-if="column.property=='bigType'"@click="handleDeleteN(row, column, $index)":class="row[item.prop] == '未达标' ? 'text-red' : ''":style="row[item.prop] < 0 ? 'color:red;' : ''"style="cursor: pointer;">{{isNaN(row[item.prop])?row[item.prop]:row[item.prop] >= 0? row[item.prop]: Math.abs(row[item.prop])}}</span><spanv-else:class="row[item.prop] == '未达标' ? 'text-red' : ''":style="row[item.prop] < 0 ? 'color:red;' : ''">{{isNaN(row[item.prop])?row[item.prop]:row[item.prop] >= 0? row[item.prop]: Math.abs(row[item.prop])}}</span></template><el-table-column:prop="iteam.prop":label="iteam.titleName"align="center"v-for="(iteam, idx) in item.childTitle":key="idx"><template slot-scope="{ row }"><span:class="row[iteam.prop] == '未达标' ? 'text-red' : ''":style="row[iteam.prop] < 0 ? 'color:red;' : ''">{{isNaN(row[iteam.prop])?row[iteam.prop]:row[iteam.prop] >= 0? row[iteam.prop]: Math.abs(row[iteam.prop])}}</span></template></el-table-column></el-table-column></el-table></div>
</template>
<script>
export default {name: 'demo',data() {return {input: '',tableHeader: [{titleName: '类型',childTitle: null,prop: 'bigType',},{titleName: '类型',childTitle: null,prop: 'smallType1',},{titleName: 'A',childTitle: [{titleName: 'a1',childTitle: null,prop: 'prop2',},{titleName: 'a2',childTitle: null,prop: 'prop3',},],},{titleName: 'B',childTitle: [{titleName: 'b1',childTitle: null,prop: 'prop4',},{titleName: 'b2',childTitle: null,prop: 'prop5',},{titleName: 'b3',childTitle: null,prop: 'prop6',},{titleName: 'b4',childTitle: null,prop: 'prop7',},],},{titleName: 'C',childTitle: [{titleName: 'c1',childTitle: null,prop: 'prop8',},{titleName: 'c2',childTitle: null,prop: 'prop9',},{titleName: 'c3',childTitle: null,prop: 'prop10',},],},{titleName: 'D',childTitle: [{titleName: 'd1',childTitle: null,prop: 'prop11',},{titleName: 'd2',childTitle: null,prop: 'prop12',},],},{titleName: 'W',childTitle: [{titleName: 'w1',childTitle: null,prop: 'prop13',},{titleName: 'w2',childTitle: null,prop: 'prop14',},],},],initTableData: [{id: 23,bigType: 'AA',smallType1: 'aa1',prop2: '1.0',prop3: '2.5',prop4: '40.0',prop5: '1.0',prop6: '2.5',prop7: '未达标',prop8: '0.0',prop9: '0.0',prop10: '0.0',prop11: '1.0',prop12: '100.0',prop13: '1.0',prop14: '100.0',rowspan: 1,},{id: 38,bigType: 'AA',smallType1: 'aa2',prop2: '8.0',prop3: '100.0',prop4: '2.0',prop5: '8.0',prop6: '100.0',prop7: '达标',prop8: '8.0',prop9: '0.0',prop10: '0.0',prop11: '6.0',prop12: '75.0',prop13: '8.0',prop14: '100.0',},{id: 53,bigType: 'AA',smallType1: 'aa3',prop2: '19.0',prop3: '47.5',prop4: '40.0',prop5: '19.0',prop6: '47.5',prop7: '未达标',prop8: '19.0',prop9: '0.0',prop10: '0.0',prop11: '19.0',prop12: '100.0',prop13: '19.0',prop14: '100.0',},{id: 68,bigType: 'AA',smallType1: 'aa4',prop2: '0.0',prop3: '0.0',prop4: '0.0',prop5: '0.0',prop6: '0.0',prop7: '未达标',prop8: '0.0',prop9: '0.0',prop10: '0.0',prop11: '0.0',prop12: '0.0',prop13: '0.0',prop14: '0.0',},{id: 83,bigType: 'XX',smallType1: 'xx1',prop2: '55.0',prop3: '0.0',prop4: '0.0',prop5: '76.0',prop6: '0.0',prop7: '未达标',prop8: '64.0',prop9: '0.0',prop10: '0.0',prop11: '65.0',prop12: '85.53',prop13: '61.0',prop14: '80.26',rowspan: 1,},{id: 831,bigType: 'XX',smallType1: 'xx2',prop2: '55.0',prop3: '0.0',prop4: '0.0',prop5: '76.0',prop6: '0.0',prop7: '未达标',prop8: '64.0',prop9: '0.0',prop10: '0.0',prop11: '65.0',prop12: '85.53',prop13: '61.0',prop14: '80.26',rowspan: 1,},{id: 832,bigType: 'XX',smallType1: 'xx3',prop2: '55.0',prop3: '0.0',prop4: '0.0',prop5: '76.0',prop6: '0.0',prop7: '未达标',prop8: '64.0',prop9: '0.0',prop10: '0.0',prop11: '65.0',prop12: '85.53',prop13: '61.0',prop14: '80.26',rowspan: 1,},{id: 98,bigType: 'QQ',smallType1: '-',prop2: '0.0',prop3: '0.0',prop4: '0.0',prop5: '0.0',prop6: '0.0',prop7: '未达标',prop8: '0.0',prop9: '0.0',prop10: '0.0',prop11: '0.0',prop12: '0.0',prop13: '0.0',prop14: '0.0',rowspan: 1,},{id: 113,bigType: 'WW',smallType1: 'ww',prop2: '0.0',prop3: '0.0',prop4: '0.0',prop5: '0.0',prop6: '0.0',prop7: '未达标',prop8: '0.0',prop9: '0.0',prop10: '0.0',prop11: '0.0',prop12: '0.0',prop13: '0.0',prop14: '0.0',rowspan: 1,},{id: 128,bigType: 'DD',smallType1: 'dd1',prop2: '1.0',prop3: '1.25',prop4: '80.0',prop5: '1.0',prop6: '1.25',prop7: '未达标',prop8: '1.0',prop9: '0.0',prop10: '0.0',prop11: '1.0',prop12: '100.0',prop13: '1.0',prop14: '100.0',rowspan: 1,},{id: 1281,bigType: 'DD',smallType1: 'dd2',prop2: '1.0',prop3: '1.25',prop4: '80.0',prop5: '1.0',prop6: '1.25',prop7: '未达标',prop8: '1.0',prop9: '0.0',prop10: '0.0',prop11: '1.0',prop12: '100.0',prop13: '1.0',prop14: '100.0',rowspan: 1,},{id: 1282,bigType: 'DD',smallType1: 'dd3',prop2: '1.0',prop3: '1.25',prop4: '80.0',prop5: '1.0',prop6: '1.25',prop7: '未达标',prop8: '1.0',prop9: '0.0',prop10: '0.0',prop11: '1.0',prop12: '100.0',prop13: '1.0',prop14: '100.0',rowspan: 1,},],dialogTypeMergeArr: [{rowspan: 4,colspan: 1,},{rowspan: 0,colspan: 0,},{rowspan: 0,colspan: 0,},{rowspan: 0,colspan: 0,},{rowspan: 1,colspan: 1,},{rowspan: 1,colspan: 1,},{rowspan: 1,colspan: 1,},{rowspan: 1,colspan: 1,},],tableData: [],select_box: [],}},mounted() {this.dealTableData(this.initTableData)this.dialogHeaderMergeArr = this.mergeTableHeader(this.tableHeader)},methods: {tableHeaderMerge({ row, column, rowIndex, columnIndex }) {console.log(312312)if (rowIndex == 0) {this.$nextTick(() => {// row[columnIndex].colSpan=this.dialogHeaderMergeArr[columnIndex];if (document.getElementsByClassName(column.id).length !== 0) {document.getElementsByClassName(column.id)[0].setAttribute('colSpan', this.dialogHeaderMergeArr[columnIndex])}})if (this.dialogHeaderMergeArr[columnIndex] == 0) {return { display: 'none' }}}},mergeTableHeader(data) {let countArr = []let labelArr = []data.map((item) => {labelArr = countArr.map((obj) => obj.label)if (item.childTitle) {countArr.push({label: item.titleName,colSpan: item.childTitle.length,hasChild: true,})} else {if (labelArr.includes(item.titleName)) {countArr.map((iteam) => {if (iteam.label == item.titleName) iteam.colSpan += 1})} else {countArr.push({label: item.titleName,colSpan: 1,hasChild: false,})}}})let tableHeaderCountArr = []countArr.map((item) => {if (!item.hasChild) {for (var i = 0; i < item.colSpan - 1; i++) {tableHeaderCountArr.push(0)}}tableHeaderCountArr.push(item.colSpan)})return tableHeaderCountArr},/*** 处理表格数据合并行*/dealTableData(data) {//把日期相同的数据并排在一块const list = this.margePropData(data, 'bigType')//处理日期相同的合并this.tableData = this.mergeRows(list, 'bigType')},handleDeleteN(row, column, $index) {this.initTableData.filter((item, index) => {if (row.bigType === item.bigType && index !== $index) {}// row.bigType === item.bigType && index !== 0})let curChildern = this.tableData.filter((item, index) => row.bigType === item.bigType && index !== $index)let curChildern_init = this.initTableData.filter((item, index) => row.bigType === item.bigType && row.smallType1 !== item.smallType1)if (this.tableData.filter((item, index) => row.bigType === item.bigType).length == 1) {if (curChildern.length > 1) {this.tableData.push(...curChildern)this.dealTableData(this.tableData)} else {this.tableData.push(...curChildern_init)this.dealTableData(this.tableData)return}} else {let newTableData = this.tableData.filter((e) => curChildern.filter((x) => e.id != x.id).length == curChildern.length)// this.tableData = newTableData// this.tableData = this.tableData.filter((it, i) => row.id === it.id)this.dealTableData(newTableData)}},/*** 合并行* @param row* @param column* @param rowIndex* @param columnIndex* @returns {{colspan: number, rowspan: (number|*)}}*/objectSpanMethod({ row, column, rowIndex, columnIndex }) {if ([0].includes(columnIndex)) {return {rowspan: row.rowspan,colspan: 1,}}// if (column.property == 'bigType') {//   return this.dialogTypeMergeArr[rowIndex]// }},/*** 数组中,某个属性相同的数据放在一块,如把某个日期相同的相连一起* @param list 传入的数组* @param prop 那个属性相同的数据* @returns {*[]}*/margePropData(list = [], prop) {let arr = [],tempArr = {}list.forEach((item) => {if (!tempArr[item[prop]]) {tempArr[item[prop]] = [item]} else {tempArr[item[prop]].push(item)}})for (const tempArrKey in tempArr) {arr = [...arr, ...tempArr[tempArrKey]]}return arr},/*** 根据当前数据的位置,在数组中插入数据* 如数组【1,2,4,5】想要在2后面插入3,*1:首先获取到2的下标,*2:然后获取要插入之前的数据,获取要插入之后的数据,中间就是插入的位置*3:最后把这三个按顺序合并就得到在想要的位置插入数据* @param list* @param index* @param target*/insertArrPositionOfIndex(list = [], index = 0, target = {}) {//根据index 找出小于index的数据放在左边const leftList = list.filter((t, i) => i < index)//根据index 找出大于index的数据放在右边const rightList = list.filter((t, i) => i >= index)// 最终合并数据return [...leftList, target, ...rightList]},/*** 合并行* @param list* @param prop*/mergeRows(list = [], prop) {list.forEach((ele) => {ele.rowspan = 1})const len = list.lengthfor (let i = 0; i < len; i++) {for (let j = i + 1; j < len; j++) {if (list[i][prop] === list[j][prop]) {list[i].rowspan++list[j].rowspan--}}// 这里跳过已经重复的数据i = i + list[i].rowspan - 1}return list},},/*** 对象数组去重* @param arr 数组* @param prop 根据什么字段去重* @returns {any[]}*/ arrayDeduplication(arr, prop) {let map = new Map()return arr.filter((item) => !map.has(item[prop]) && map.set(item[prop], 1))},
}
</script>

方式二

在这里插入图片描述

<template><el-table:data="tableData"row-key="id":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-columnv-for="(column, index) in columns":key="index":label="column.titleName":prop="column.prop":width="column.width":align="column.align"><template slot-scope="{ row, $index }">{{ row[column.prop] }}</template><el-table-columnv-if="column.childTitle"v-for="(subColumn, subIndex) in column.childTitle":key="subIndex":label="subColumn.titleName":prop="subColumn.prop":width="subColumn.width":align="subColumn.align"><template slot-scope="{ row, $index }">{{ row[subColumn.prop] }}</template></el-table-column></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{id: 1,bigType: 'AA',smallType1: 'aa1',prop2: '2.0',prop3: '5.0',prop4: '40.0',prop5: '2.0',prop6: '5.0',prop7: '未达标',prop8: '0.0',prop9: '0.0',prop10: '0.0',prop11: '2.0',prop12: '100.0',prop13: '2.0',prop14: '100.0',children: [{bigType: 'aa1',smallType1: 'aa1',prop2: '2.0',prop3: '5.0',prop4: '40.0',prop5: '2.0',prop6: '5.0',prop7: '未达标',prop8: '0.0',prop9: '0.0',prop10: '0.0',prop11: '2.0',prop12: '100.0',prop13: '2.0',prop14: '100.0',id: 2,},{bigType: 'aa2',smallType1: 'aa2',prop2: '8.0',prop3: '100.0',prop4: '2.0',prop5: '8.0',prop6: '100.0',prop7: '达标',prop8: '8.0',prop9: '0.0',prop10: '0.0',prop11: '6.0',prop12: '75.0',prop13: '8.0',prop14: '100.0',id: 3,},{bigType: 'aa3',smallType1: 'aa3',prop2: '19.0',prop3: '47.5',prop4: '40.0',prop5: '19.0',prop6: '47.5',prop7: '未达标',prop8: '19.0',prop9: '0.0',prop10: '0.0',prop11: '19.0',prop12: '100.0',prop13: '19.0',prop14: '100.0',id: 4,},{bigType: 'aa4',smallType1: 'aa4',prop2: '0.0',prop3: '0.0',prop4: '0.0',prop5: '0.0',prop6: '0.0',prop7: '未达标',prop8: '0.0',prop9: '0.0',prop10: '0.0',prop11: '0.0',prop12: '0.0',prop13: '0.0',prop14: '0.0',id: 5,},],},{id: 6,bigType: 'BB',prop2: '55.0',prop3: '0.0',prop4: '0.0',prop5: '76.0',prop6: '0.0',prop7: '未达标',prop8: '64.0',prop9: '0.0',prop10: '0.0',prop11: '65.0',prop12: '85.53',prop13: '61.0',prop14: '80.26',children: [{bigType: 'bb1',smallType1: 'bb1',prop2: '55.0',prop3: '0.0',prop4: '0.0',prop5: '76.0',prop6: '0.0',prop7: '未达标',prop8: '64.0',prop9: '0.0',prop10: '0.0',prop11: '65.0',prop12: '85.53',prop13: '61.0',prop14: '80.26',id: 7,},{bigType: 'bb2',smallType1: 'bb2',prop2: '55.0',prop3: '0.0',prop4: '0.0',prop5: '76.0',prop6: '0.0',prop7: '未达标',prop8: '64.0',prop9: '0.0',prop10: '0.0',prop11: '65.0',prop12: '85.53',prop13: '61.0',prop14: '80.26',id: 17,},],},{id: 8,bigType: 'DD',prop2: '0.0',prop3: '0.0',prop4: '0.0',prop5: '0.0',prop6: '0.0',prop7: '未达标',prop8: '0.0',prop9: '0.0',prop10: '0.0',prop11: '0.0',prop12: '0.0',prop13: '0.0',prop14: '0.0',children: [{bigType: 'dd1',smallType1: 'dd1',prop2: '0.0',prop3: '0.0',prop4: '0.0',prop5: '0.0',prop6: '0.0',prop7: '未达标',prop8: '0.0',prop9: '0.0',prop10: '0.0',prop11: '0.0',prop12: '0.0',prop13: '0.0',prop14: '0.0',id: 9,},],},],columns: [{titleName: '类型',childTitle: null,prop: 'bigType',},{titleName: 'A',childTitle: [{titleName: 'a1',childTitle: null,prop: 'prop2',},{titleName: 'a2',childTitle: null,prop: 'prop3',},],},{titleName: 'B',childTitle: [{titleName: 'b1',childTitle: null,prop: 'prop4',},{titleName: 'b2',childTitle: null,prop: 'prop5',},{titleName: 'b3',childTitle: null,prop: 'prop6',},{titleName: 'b4',childTitle: null,prop: 'prop7',},],},{titleName: 'C',childTitle: [{titleName: 'c1',childTitle: null,prop: 'prop8',},{titleName: 'c2',childTitle: null,prop: 'prop9',},{titleName: 'c3',childTitle: null,prop: 'prop10',},],},{titleName: 'D',childTitle: [{titleName: 'd1',childTitle: null,prop: 'prop11',},{titleName: 'd2',childTitle: null,prop: 'prop12',},],},{titleName: 'W',childTitle: [{titleName: 'w1',childTitle: null,prop: 'prop13',},{titleName: 'w2',childTitle: null,prop: 'prop14',},],},],}},
}
</script>

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

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

相关文章

mac中安装Homebrew

1、Homebrew是什么&#xff1f; 软件安装管理工具 2、先检查电脑中是否已经安装了Homebrew 打开终端输入&#xff1a;brew 提示命令没有找到&#xff0c;说明电脑没有安装Homebrew 如果提示上述图片说明Homebrew已经安装成功 3、安装Homebrew 进入https://brew.sh/ 复制的命…

Android开发APP显示头部Bar

Android开发显示头部Bar 需求&#xff1a; 显示如下图&#xff1a; 显示头部Bar&#xff0c;颜色也能自定义。 解决方案 这个修改是在如下三个文件里进行修改&#xff1a; 按顺序修改&#xff1a; themes.xml(night): <resources xmlns:tools"http://schemas.andr…

持续集成交付CICD:Jenkins Sharedlibrary 共享库

目录 一、理论 1.共享库 2.共享库配置 3.使用共享库 4.共享库扩展 二、实验 1.连接共享库 2.使用共享库 三、问题 1.路径报错 2.readJSON 报错 一、理论 1.共享库 &#xff08;1&#xff09;概念 1&#xff09;共享库这并不是一个全新的概念&#xff0c;其实在编…

央国企数字化转型难在哪?为什么要数字化转型?

科技在发展&#xff0c;技术在升级&#xff0c;全球信息化、数字化的步伐在加快&#xff0c;企业想要在未来的发展中抓住机会&#xff0c;更好地发展壮大&#xff0c;就需要加快企业数字化转型的速度&#xff0c;才能立足于信息化、数字化时代&#xff0c;央国企作为企业中的一…

Vue3 项目修改index.html的 title

实现思路 通过插件 vite-plugins-html 进行参数配置&#xff0c;html 中使用参数&#xff0c;实现配置安装插件 $ npm install vite-plugins-html --save-devvite.config.js 中的配置 // 可以动态处理html文件内容的 import { createHtmlPlugin } from vite-plugin-htmlexpo…

Echarts 实现两两柱图重叠(背景和实际值柱图)

Echarts实现两两重叠柱状图_echarts 重叠柱状图_Web_阿凯的博客-CSDN博客 引用启发的博客 先来效果&#xff1a; option {backgroundColor: #03213D,animation: true, // 控制动画是否开启animationDuration: 1000, // 动画的时长, 它是以毫秒为单位animationDuration: func…

KaiwuDB 监控组件及辅助 SQL 调优介绍

一、介绍 KaiwuDB 具备完善的行为数据采集功能&#xff0c;此功能要求 KaiwuDB 数据库系统 C/E/T 端不同进程的不同维度的指标采集功能十分完善&#xff1b;在不同进程完成指标采集后&#xff0c;会通过 Opentelemetry 和 Collector 将指标存入 Prometheus&#xff0c;以便查找…

KiCad源代码研究:KiCad是如何渲染和绘图的。

common.json文件中appearance.show_scrollbars common.json对应于代码的common_settings 1.EDA_DRAW_PANEL_GAL类 EDA_DRAW_PANEL_GAL类中定义了绘图的基本要素&#xff1a; /// Interface for drawing objects on a 2D-surfaceKIGFX::GAL* m_gal;/// Stores v…

主播三维能力总览

主播需要的三维能力包括话术能力、成交能力和表现力 主播的话术能力 主播在直播过程中运用语言和表达方式的能力。好的话术能力可以帮助主播吸引观众、增加互动、提高直播效果等。 1.了解观众需求:在直播前&#xff0c;主播应该了解观众的需求和兴趣&#xff0c;以便在直播过…

小程序商城免费搭建之java商城 电子商务Spring Cloud+Spring Boot+二次开发+mybatis+MQ+VR全景+b2b2c

1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、Redis 3. 前端框架…

98.qt qml-使用曲线图综合示例、支持多种鼠标交互、支持百万数据显示(已适配黑白风格)

在上章我们只是简单实现了曲线图和折线图的显示: 79.qt qml-如何在QML中使用QCustomPlot之曲线/折线示例(已适配黑白风格)_qml 折线图_诺谦的博客-CSDN博客 所以本章实现综合示例、并添加多种功能如下所示: 详细显示:鼠标任意移动显示具体值内容鼠标右击: 弹出菜单栏,支持…

记一次解决Pyqt6/Pyside6添加QTreeView或QTreeWidget导致窗口卡死(未响应)的新路历程,打死我都想不到是这个原因

文章目录 💢 问题 💢🏡 环境 🏡📄 代码💯 解决方案 💯⚓️ 相关链接 ⚓️💢 问题 💢 我在窗口中添加了一个 QTreeWidget控件 ,但是程序在运行期间,只要鼠标进入到 QTreeWidget控件 内进行操作,时间超过几秒中就会出现窗口 未响应卡死的 状态 🏡 环境 �…

智慧校园烟火识别及预警解决方案,保障校园消防安全

一、方案背景 校园消防安全一直以来是社会各界备受关注的问题。为了保障师生的人身安全和财产安全&#xff0c;越来越多的学校开始引入AI智能检测技术&#xff0c;通过运用AI智能烟火检测技术&#xff0c;对学校的周界、教室、走廊、公共区域、教学楼、食堂等场所进行安全监测…

世微 电动车摩托车灯 5-80V 1.2A 一切二降压恒流驱动器AP2915

产品描述 AP2915 是一款可以一路灯串切换两路灯串的降压恒流驱动器,高效率、外围简单、内置功率管&#xff0c;适用于5-80V 输入的高精度降压 LED 恒流驱动芯片。内置功率管输出最大功率可达 12W&#xff0c;最大电流 1.2A。AP2915 一路灯亮切换两路灯亮&#xff0c;其中一路灯…

Leetcode 153. 寻找旋转排序数组中的最小值

class Solution {//因为最小值和最大值总是相邻的&#xff08;除了初始状态&#xff09;//1.用二分查找&#xff0c;如果右侧是有序则最小值在左侧//2.如果右侧无序则最小值在右侧//如果mid正好是最小值&#xff0c;那么右侧自然是有序的&#xff0c;//为了将mid加入到搜索的一…

windows上安装MySQL Server.

进入官网 MySQL 找到 下载&#xff0c;并点进入。 往下翻&#xff0c;找到社区下载&#xff0c;进入页面 选择 Mysql community Server 选择系统&#xff0c;下载 之后解压。 将解压文件夹下的bin路径添加到变量值中 配置初始化的my.ini文件 [mysqld] # 设置3306端口 port330…

Docker(镜像、容器、仓库)工具安装使用命令行选项及构建、共享和运行容器化应用程序

文章目录 前言&#x1f31f;一、Docker工具安装&#x1f31f;二、Docker命令行选项&#x1f30f;2.1.docker run命令选项&#xff1a;&#x1f30f;2.2.docker build命令选项&#xff1a;&#x1f30f;2.3.docker images命令选项&#xff1a;&#x1f30f;2.4.docker ps命令选项…

【日常总结】java JSON 转 实体类 (含多层嵌套)

一、场景 二、问题 三、解决方案 四、实战 1. 引入maven依赖 2. IEDA 安装lombok 插件 3. 安装 GsonFormPlu 插件 4. 使用 Stage 1&#xff1a;新建类&#xff0c;右键 选择 Generate Stage 2&#xff1a;选择 GsonFormatPlus Stage 3&#xff1a;将json复制其中&…

【Flink 问题集】The generic type parameters of ‘Collector‘ are missing

错误展示&#xff1a; Exception in thread "main" org.apache.flink.api.common.functions.InvalidTypesException: The return type of function main(CollectionDemo.java:33) could not be determined automatically, due to type erasure. You can give type in…