EasyExcel 動態設置表格的背景顏色和排列

????????項目中使用EasyExcel把數據以excel格式導出,其中設置某一行、某一列單元格的背景顏色、排列方式十分常用,記錄下來方便以后查閱。

1. 導入maven依賴:

<dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.0</version><scope>compile</scope>
</dependency>

2. 導出字段實體類:

@Data
@NoArgsConstructor
@Accessors(chain = true)
public class AchievementParamExcelDto {/*** 字段是動態配置的,配置哪些顯示哪些*/@ExcelProperty(value = "產品類別", converter = NullConverter.class)@AchievementParam("0001001")private String type;@ExcelProperty(value = "商品名稱(開票名稱)", converter = NullConverter.class)@AchievementParam("0001002")private String commodityName;@ExcelProperty(value = "品牌", converter = NullConverter.class)@AchievementParam("0001003")private String brand;@ExcelProperty(value = "型號", converter = NullConverter.class)@AchievementParam("0001004")private String model;@ExcelProperty(value = "技術規格", converter = NullConverter.class)@AchievementParam("0001005")private String technicalSpecifications;@ExcelProperty(value = "單位", converter = NullConverter.class)@AchievementParam("0001006")private String unit;@ExcelProperty(value = "數量", converter = IntegerNumberConverter.class)@AchievementParam("0001007")private Integer num;@ExcelProperty(value = "單價", converter = IntegerNumberConverter.class)@AchievementParam("0001008")private BigDecimal unitPrice;@ExcelProperty(value = "小計(元)", converter = IntegerNumberConverter.class)@AchievementParam("0001009")@NumberFormat("#.00")private BigDecimal subtotal;@ExcelProperty(value = "物料代碼", converter = NullConverter.class)@AchievementParam("0001010")private String materialCode;@ExcelProperty("備注")@AchievementParam("0001011")private String remark;@ExcelProperty(value = "序號", converter = IntegerNumberConverter.class)@AchievementParam("0001012")private Integer index;@ExcelProperty(value = "銷售項名稱", converter = NullConverter.class)@AchievementParam("0001013")private String name;@ExcelProperty(value = "銷售項編碼", converter = NullConverter.class)@AchievementParam("0001014")private String itemCode;public AchievementParamExcelDto(int index, AchievementVo vo, String remark) {this.index = index;this.name = handleNull(vo.getName());this.type = handleNull(vo.getType());this.commodityName = handleNull(vo.getCommodityName());this.brand = handleNull(vo.getBrand());this.model = handleNull(vo.getModel());this.technicalSpecifications = handleNull(vo.getTechnicalSpecifications());this.unit = handleNull(vo.getUnit());this.num = StringUtils.isEmpty(vo.getNum()) ? 0: Integer.parseInt(vo.getNum());this.unitPrice = vo.getUnitPrice();this.subtotal = vo.getSubtotal();this.materialCode = StringUtils.isEmpty(vo.getMaterialCode()) ? "無固定物料" : vo.getMaterialCode();this.remark = remark;this.itemCode = StringUtils.isEmpty(vo.getItemCode()) ? (StringUtils.isEmpty(vo.getMaterialCode()) ? "— —" : vo.getMaterialCode()) : vo.getItemCode();}private String handleNull(String str) {return StringUtils.isEmpty(str) ? "— —" : str;}
}

3. 數據導出業務,并在業務中實現動態設置背景顏色和排列方式:

private void doDownloadAchievementExcelFile(List<AchievementsExportParamEntity> achievementExportParam,List<AchievementParamExcelDto> result, HttpServletResponse response, String fileName) {if (CollectionUtils.isEmpty(achievementExportParam)) {return;}// excel表頭List<List<String>> header = new ArrayList<>();// 需要導出的數據字段List<String> includeColumnFiledNames = new ArrayList<>();// 導出實體類中所有的字段Field[] fields = ReflectUtil.getFields(AchievementParamExcelDto.class);achievementExportParam.sort(Comparator.comparing(AchievementsExportParamEntity::getSort));// 通過配置導出的字段來動態設置表頭和行字段數據for (AchievementsExportParamEntity achievementsExportParamEntity : achievementExportParam) {String paramCode = achievementsExportParamEntity.getParamCode();//設置需要導出的頭、行字段for (Field field : fields) {AchievementParam annotation = field.getAnnotation(AchievementParam.class);if (annotation == null) {continue;}if (StringUtils.equals(paramCode, annotation.value())) { // 判斷字段是否有配置導出header.add(Lists.newArrayList(achievementsExportParamEntity.getParamName())); // 添加頭數據includeColumnFiledNames.add(field.getName()); // 添加需要導出的行字段數據break;}}}/******************下面是設置背景顏色和排列方式的關鍵代碼******************/// 按類型進行設置背景顏色Map<Integer, Short> rowBackColor = new HashMap<>();for (int i = 0; i < result.size(); i++) {AchievementParamExcelDto achievementParamExcelDto = result.get(i);String remark = achievementParamExcelDto.getRemark();if ("軟件".equals(remark)) {// 表格的行索引從1開始,列索引從0開始rowBackColor.put(i + 1, IndexedColors.LEMON_CHIFFON.index);} else if ("硬件".equals(remark)) {rowBackColor.put(i + 1, IndexedColors.LIGHT_TURQUOISE.index);} else if ("模型".equals(remark)) {rowBackColor.put(i + 1, IndexedColors.LIGHT_GREEN.index);}else if ("實施服務".equals(remark)) {rowBackColor.put(i + 1, IndexedColors.LIGHT_CORNFLOWER_BLUE.index);}}// 導出時技術規格居左顯示,其它劇中顯示Map<Integer, HorizontalAlignment> horizontalAlignmentMap = new HashMap<>();for (int i = 0; i < header.size(); i++) {if ("技術規格".equals(header.get(i).get(0))) {horizontalAlignmentMap.put(i, HorizontalAlignment.LEFT);} else {horizontalAlignmentMap.put(i, HorizontalAlignment.CENTER);}}try {Class<? extends AchievementParamExcelDto> aClass = AchievementParamExcelDto.class;// 設置字段順序Set<String> orderColumn = new LinkedHashSet<>(includeColumnFiledNames);for (Field field : fields) {orderColumn.add(field.getName());}setExcelIndex(aClass, new ArrayList<>(orderColumn));response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");response.setCharacterEncoding("utf-8");fileName = URLEncoder.encode(fileName, "UTF-8").replaceAll("\\+", "%20");response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");EasyExcel.write(response.getOutputStream(), aClass).registerWriteHandler(new CustomCellWriteHandler(rowBackColor, horizontalAlignmentMap)).registerWriteHandler(new WidthWriteHandler()).sheet("成果物清單").head(header).includeColumnFieldNames(includeColumnFiledNames).doWrite(result);} catch (Exception e) {log.error("download error", e);throw new BusinessException(ErrorCodes.FILE_DOWNLOAD_ERROR);}}

4. 在自定義樣式的handle中根據配置數據動態顯示樣式:

public class CustomCellWriteHandler implements CellWriteHandler {// 一個表格最多創建6W個樣式,把每行的背景色放到集合中,統一設置,避免設置失敗Map<Integer, Short> rowBackColor = new HashMap<>();// 排列樣式集合Map<Integer, HorizontalAlignment> horizontalAlignmentMap = new HashMap<>();public CustomCellWriteHandler() {}public CustomCellWriteHandler(Map<Integer, Short> rowBackColor, Map<Integer, HorizontalAlignment> horizontalAlignmentMap) {this.rowBackColor = rowBackColor;this.horizontalAlignmentMap = horizontalAlignmentMap;}@Overridepublic void beforeCellCreate(WriteSheetHolder writeSheetHolder, WriteTableHolder writeTableHolder,Row row, Head head, Integer columnIndex, Integer relativeRowIndex, Boolean isHead) {// 設置行高short height = 600;row.setHeight(height);}@Overridepublic void afterCellDispose(CellWriteHandlerContext context) {Cell cell = context.getCell();// 當前事件會在 數據設置到poi的cell里面才會回調// 判斷不是頭的情況 如果是fill 的情況 這里會==null 所以用not trueif (!BooleanUtils.isNotTrue(context.getHead())) { // 表頭Workbook workbook = context.getWriteWorkbookHolder().getWorkbook();CellStyle cellStyle = workbook.createCellStyle();// 這里需要指定 FillPatternType 為FillPatternType.SOLID_FOREGROUNDcellStyle.setFillPattern(FillPatternType.SOLID_FOREGROUND);// 顏色// 設置rgb顏色byte[] rgb = new byte[]{(byte) 192, 0, 0};XSSFCellStyle xssfCellColorStyle = (XSSFCellStyle) cellStyle;xssfCellColorStyle.setFillForegroundColor(new XSSFColor(rgb, null));xssfCellColorStyle.setAlignment(HorizontalAlignment.CENTER);xssfCellColorStyle.setVerticalAlignment(VerticalAlignment.CENTER);// 寬度// 邊框xssfCellColorStyle.setBorderBottom(BorderStyle.THIN);xssfCellColorStyle.setBorderLeft(BorderStyle.THIN);xssfCellColorStyle.setBorderRight(BorderStyle.THIN);xssfCellColorStyle.setBorderTop(BorderStyle.THIN);// 字體Font font = workbook.createFont();font.setBold(true);font.setFontHeightInPoints((short) 11);font.setFontName("微軟雅黑");font.setColor(IndexedColors.WHITE.getIndex());xssfCellColorStyle.setFont(font);cell.setCellStyle(xssfCellColorStyle);context.getFirstCellData().setWriteCellStyle(null);} else { // 單元格// 拿到poi的workbookWorkbook workbook = context.getWriteWorkbookHolder().getWorkbook();// 不同單元格盡量傳同一個 cellStyleCellStyle cellStyle = workbook.createCellStyle();/***************下面是關鍵代碼,根據表格的行號和列號與設置的數據進行匹配后動態設置***********/// 行號-重要***Integer rowIndex = context.getRowIndex();// 如果設置了每行的樣式,動態設置;沒有設置則統一設置為白色背景if (null != rowBackColor.get(rowIndex)) {// 拿到設置的顏色Short colorIndex = rowBackColor.get(rowIndex);cellStyle.setFillForegroundColor(colorIndex);} else {// 默認背景顏色cellStyle.setFillForegroundColor(IndexedColors.WHITE.getIndex());}// 列號-重要***Integer columnIndex = context.getColumnIndex();// 技術規格左對齊,其它劇中對齊if (null != horizontalAlignmentMap.get(columnIndex)) {cellStyle.setAlignment(horizontalAlignmentMap.get(columnIndex));} else {cellStyle.setAlignment(HorizontalAlignment.CENTER);}// 垂直居中cellStyle.setVerticalAlignment(VerticalAlignment.CENTER);// 邊框cellStyle.setBorderBottom(BorderStyle.THIN);cellStyle.setBorderLeft(BorderStyle.THIN);cellStyle.setBorderRight(BorderStyle.THIN);cellStyle.setBorderTop(BorderStyle.THIN);// 字體Font font = workbook.createFont();font.setFontHeightInPoints((short) 8);font.setFontName("微軟雅黑");cellStyle.setFont(font);// 這里需要指定 FillPatternType 為FillPatternType.SOLID_FOREGROUNDcellStyle.setFillPattern(FillPatternType.SOLID_FOREGROUND);cell.setCellStyle(cellStyle);// 由于這里沒有指定dataformat 最后展示的數據 格式可能會不太正確// 這里要把 WriteCellData的樣式清空, 不然后面還有一個攔截器 FillStyleCellWriteHandler 默認會將 WriteCellStyle 設置到// cell里面去 會導致自己設置的不一樣(很關鍵)context.getFirstCellData().setWriteCellStyle(null);}}
}

5. 至此,主要的代碼實現完了,實現的效果:

?

在第3步中,有涉及到幾個方法或實體類,這里對應給出補充:

①入參result,是上一步從數據庫中查詢并封裝后的數據,大致如下:

List<AchievementParamExcelDto> result = new ArrayList<>();
int index = 1;
for (AchievementVo achievementVo : distAchievementDto.getSaleList()) {result.add(new AchievementParamExcelDto(index++, achievementVo, localeMessage.getMessage(LanguageCn.PRODUCT_TYPE_SOFTWARE)));
}
for (AchievementVo achievementVo : distAchievementDto.getHardwareList()) {if (achievementVo.getSubtotal() != null && achievementVo.getSubtotal().compareTo(BigDecimal.ZERO) > 0) { // 只導出小計大于0的數據result.add(new AchievementParamExcelDto(index++, achievementVo, localeMessage.getMessage(LanguageCn.PRODUCT_TYPE_HARDWARE)));}
}
for (AchievementVo achievementVo : distAchievementDto.getModelList()) {result.add(new AchievementParamExcelDto(index++, achievementVo, localeMessage.getMessage(LanguageCn.PRODUCT_TYPE_MODEL)));
}
for (AchievementVo achievementVo : distAchievementDto.getServiceList()) {result.add(new AchievementParamExcelDto(index++, achievementVo, localeMessage.getMessage(LanguageCn.PRODUCT_TYPE_SERVICE)));
}

?distAchievementDto對應的數據結構如下(AchievementVo便是業務中數據實體類了,可參考效果圖中的字段):

@Data
@NoArgsConstructor
@AllArgsConstructor
public class DistAchievementDto implements Serializable {private static final long serialVersionUID = 1L;@ApiModelProperty(value = "軟件銷售清單", example = "[]")private List<AchievementVo> saleList = new ArrayList<>();@ApiModelProperty(value = "實施服務銷售清單", example = "[]")private List<AchievementVo> serviceList = new ArrayList<>();@ApiModelProperty(value = "硬件銷售清單", example = "[]")private List<AchievementVo> hardwareList = new ArrayList<>();@ApiModelProperty(value = "模型清單", example = "[]")private List<AchievementVo> modelList = new ArrayList<>();
}

② 入參 achievementExportParam 是從數據庫中查出的配置導出的字段:

@EqualsAndHashCode(callSuper = true)
@Data
public class AchievementsExportParamEntity extends AbstractEntity implements Serializable {private static final long serialVersionUID = 1L;@ApiModelProperty("導出類別:1-SPS;2-供方案使用;5-海外版本")private Integer exportType;@ApiModelProperty("導出字段編碼")private String paramCode;@ApiModelProperty("導出字段名稱")private String paramName;@ApiModelProperty("是否選中:0-否 1-是 默認值是0")private String paramSelected;@ApiModelProperty("導出順序")private Integer sort;
}

?③ 排序方法?setExcelIndex

@SuppressWarnings("unchecked")
private synchronized void setExcelIndex(Class<?> aClass, List<String> columnNames) throws NoSuchFieldException, IllegalAccessException {//獲取當前對象的字段ArrayList<Field> fields = Lists.newArrayList(aClass.getDeclaredFields());Class<?> superclass = aClass.getSuperclass();if (superclass != null) {//有父類則獲取父類對象的字段fields.addAll(Lists.newArrayList(superclass.getDeclaredFields()));}for (int i = 0; i < columnNames.size(); i++) {for (Field field : fields) {if (!field.getName().equals(columnNames.get(i))) continue;ExcelProperty annotation = field.getAnnotation(ExcelProperty.class);if (annotation == null) continue;InvocationHandler handler = Proxy.getInvocationHandler(annotation);//獲取 AnnotationInvocationHandler 的 memberValues 字段Field fieldMv = handler.getClass().getDeclaredField("memberValues");//因為這個字段是 private final 修飾,所以要打開權限fieldMv.setAccessible(true);Map<Object, Object> memberValues = (Map<Object, Object>) fieldMv.get(handler);if (!memberValues.containsKey("value")) continue;memberValues.put("index", i);}}
}

④ 自定義單元格寬度樣式?WidthWriteHandler

public class WidthWriteHandler extends AbstractColumnWidthStyleStrategy {private final Map<String, Integer> map = new ImmutableMap.Builder<String, Integer>().put("序號", 9).put("名稱", 18).put("產品類別", 32).put("商品名稱(開票名稱)", 22).put("品牌", 10).put("型號", 25).put("技術規格", 30).put("單位", 9).put("數量", 9).put("單價(元)", 9).put("小計(元)", 9).put("單價(美元)", 9).put("小計(美元)", 9).put("物料代碼", 12).put("成果物類別", 11).put("銷售項編碼", 12).build();@Overrideprotected void setColumnWidth(WriteSheetHolder writeSheetHolder, List<WriteCellData<?>> cellDataList, Cell cell,Head head, Integer relativeRowIndex, Boolean isHead) {if (isHead) {String stringCellValue = cell.getStringCellValue();Integer integer = map.get(stringCellValue.trim());if (null == integer) {integer = 18;}Sheet sheet = writeSheetHolder.getSheet();int columnIndex = cell.getColumnIndex();// 列寬40sheet.setColumnWidth(columnIndex, integer * 256);}}
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/63280.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/63280.shtml
英文地址,請注明出處:http://en.pswp.cn/web/63280.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

概率論得學習和整理23:EXCEL 數據透視表基礎操作

目錄 1 選擇數據&#xff0c;插入數據透視表 2 選擇數據透視表生成位置 3 出現了數據透視表的面板 4 數據透視表的基本結構認識 4.1 交叉表/列聯表 4.2 row, column, cell 一個新增的篩選器&#xff0c;就這么簡單 4.3 可以只添加 rowcell/值 &#xff0c;也可以colu…

計算機網絡從誕生之初到至今的發展歷程

前言 "上網"&#xff0c;相信大家對這個動詞已經不再陌生&#xff0c;網 通常指的是網絡&#xff1b;在 2024 年的今天&#xff0c;網絡已經滲透到了每個人的生活中&#xff0c;成為其不可或缺的一部分&#xff1b;你此時此刻在看到我的博客&#xff0c;就是通過網絡…

C# 讀取EXCEL的數據批量插入單個PDF里的多個位置

C# 讀取EXCEL的數據批量插入單個PDF里的多個位置 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Diagnostics; using System.Drawing; using System.IO; using System.Linq; using System.Reflection; usin…

圖論筆記1

1.1鄰接矩陣儲存法 //創建:二維數組vector<vector<int>> graph(n,vector<int>(n,0));//儲存for(int i0;i<m;i){int x1,x2;cin>>x1>>x2;graph[x1-1][x2-1]1;}1.2鄰接表儲存法 補充&#xff1a;c中的list是鏈表 鏈接 //創建&#xff1a;數組…

GB28181系列三:GB28181流媒體服務器ZLMediaKit

我的音視頻/流媒體開源項目(github) GB28181系列目錄 目錄 一、ZLMediaKit介紹 二、 ZLMediaKit安裝、運行(Ubuntu) 1、安裝 2、運行 3、配置 三、ZLMediaKit使用 一、ZLMediaKit介紹 ZLMediaKit是一個基于C11的高性能運營級流媒體服務框架&#xff0c;項目地址&#xf…

iPhone恢復技巧:如何從 iPhone 恢復丟失的照片

在計算機時代&#xff0c;我們依靠手機來捕捉和存儲珍貴的回憶。但是&#xff0c;如果您不小心刪除或丟失了手機上的照片怎么辦&#xff1f;這真的很令人沮喪和煩惱&#xff0c;不是嗎&#xff1f;好吧&#xff0c;如果您在 iPhone 上丟失了照片&#xff0c;您不必擔心&#xf…

如何將你的 Ruby 應用程序從 OpenSearch 遷移到 Elasticsearch

作者&#xff1a;來自 Elastic Fernando Briano 將 Ruby 代碼庫從 OpenSearch 客戶端遷移到 Elasticsearch 客戶端的指南。 OpenSearch Ruby 客戶端是從 7.x 版 Elasticsearch Ruby 客戶端分叉而來的&#xff0c;因此代碼庫相對相似。這意味著當將 Ruby 代碼庫從 OpenSearch 遷…

LeetCode 283.移動零(超簡單講解)

283.移動零 題目示例示例1示例2 解題思路快慢指針實現設計 詳細代碼 題目 給定一個數組 nums&#xff0c;編寫一個函數將所有 0 移動到數組的末尾&#xff0c;同時保持非零元素的相對順序。 請注意 &#xff0c;必須在不復制數組的情況下原地對數組進行操作。 示例 示例1 …

Day8 神經網絡中的導數基礎

Day8 神經網絡中的導數基礎 導數的定義 導數&#xff08;Derivative&#xff09;是微積分中的一個核心概念&#xff0c;用于描述函數在某一點的變化率。簡單來說&#xff0c;導數就是函數值隨自變量微小變化而產生的變化量&#xff0c;即斜率或變化率。假設有一個函數 f ( x…

RequestContextHolder 與 HttpServletRequest 的聯系

1. 什么是 RequestContextHolder&#xff1f; RequestContextHolder 是 Spring 框架 提供的一個工具類&#xff0c;用于在當前線程中存儲和獲取與請求相關的上下文信息。它是基于 ThreadLocal 實現的&#xff0c;能夠保證每個線程獨立存儲和訪問請求信息。 與 HttpServletReq…

SpringBoot配置和啟動

1.內部配置加載順序&#xff1a; 加載規則 加載順序和優先級與配置文件所在路徑有關優先級高的配置會覆蓋優先級低的配置&#xff0c;配置文件會全部加載&#xff0c;遇到相同的配置高優先級覆蓋低優先級命令行參數 -spring.config.location 自定義配置文件路徑&#xff0c;可…

【視頻生成模型】——Hunyuan-video 論文及代碼講解和實操

&#x1f52e;混元文生視頻官網 | &#x1f31f;Github代碼倉庫 | &#x1f3ac; Demo 體驗 | &#x1f4dd;技術報告 | &#x1f60d;Hugging Face 文章目錄 論文詳解基礎介紹數據預處理 &#xff08;Data Pre-processing&#xff09;數據過濾 (Data Filtering)數據標注 (Data…

52 基于單片機的超聲波、溫濕度、光照檢測分階段報警

目錄 一、主要功能 二、硬件資源 三、程序編程 四、實現現象 一、主要功能 1.通過DHT11模塊讀取環境溫度和濕度: 2.將濕度、障礙物距顯示在lcd1602上面&#xff0c;第一行顯示溫度和濕度,格式為:xxCyy%&#xff0c;第二行顯示超聲波傳感器測得的距離&#xff0c;格式為:Di…

大數據與AI:從分析到預測的躍遷

引言&#xff1a;數據時代的新紀元 從每天的社交分享到企業的運營決策&#xff0c;數據早已成為現代社會不可或缺的資源。我們正置身于一個數據爆炸的時代&#xff0c;數以億計的信息流實時生成&#xff0c;為人類帶來了前所未有的洞察能力。然而&#xff0c;數據的價值并不僅限…

3D視覺[一]3D計算機視覺

3D視覺[一]3D計算機視覺 3D計算機視覺概述 像機標定 文章目錄 3D視覺[一]3D計算機視覺前言一、人類視覺二、計算機視覺2.1 計算機視覺的研究目的2.2 計算機視覺的研究任務2.3 計算機視覺的研究方法2.4 視覺計算理論2.5 馬爾框架中計算機視覺表達的四個層次2.5.1 圖像&#xff…

OpenCV目標檢測 級聯分類器 C++實現

一.目標檢測技術 目前常用實用性目標檢測與跟蹤的方法有以下兩種&#xff1a; 幀差法 識別原理&#xff1a;基于前后兩幀圖像之間的差異進行對比&#xff0c;獲取圖像畫面中正在運動的物體從而達到目標檢測 缺點&#xff1a;畫面中所有運動中物體都能識別 舉個例子&#xf…

QT從入門到精通(二) ——信號與槽機制

Qt 的信號與槽機制&#xff08;Signal and Slot&#xff09;是 Qt 框架 中用于對象間通信的核心機制之一。它允許對象之間進行松耦合的事件驅動式通信&#xff0c;尤其適合 GUI 應用程序 中的事件處理。 1. 基本概念 信號 (Signal) 當對象的狀態發生變化時&#xff0c;它會發…

如何使用git新建本地倉庫并關聯遠程倉庫的步驟(詳細易懂)

一、新建本地倉庫并關聯遠程倉庫的步驟 新建本地倉庫 打開終端&#xff08;在 Windows 上是命令提示符或 PowerShell&#xff0c;在 Linux 和Mac上是終端應用&#xff09;&#xff0c;進入你想要創建倉庫的目錄。例如&#xff0c;如果你想在桌面上創建一個名為 “my - project”…

1Panel應用推薦:MaxKB開源知識庫問答系統

1Panel&#xff08;github.com/1Panel-dev/1Panel&#xff09;是一款現代化、開源的Linux服務器運維管理面板&#xff0c;它致力于通過開源的方式&#xff0c;幫助用戶簡化建站與運維管理流程。為了方便廣大用戶快捷安裝部署相關軟件應用&#xff0c;1Panel特別開通應用商店&am…

element plus的table組件,點擊table的數據是,會出現一個黑色邊框

在使用 Element Plus 的 Table 組件時&#xff0c;如果你點擊表格數據后出現了一個黑色邊框&#xff0c;這通常是因為瀏覽器默認的焦點樣式&#xff08;outline&#xff09;被觸發了。如圖&#xff1a; 你可以通過自定義 CSS 來隱藏這個黑色邊框&#xff0c;代碼如下&#xff1…