QSpinBox的用法及其使用QSS對其美化

摘要

在現代應用程序開發中,提供一個直觀且用戶友好的界面至關重要。Qt框架提供了豐富的控件和工具,幫助開發者實現這一目標。本文將詳細介紹如何使用Qt的QSpinBox控件讓用戶輸入數值,并通過Qt Style Sheets (QSS) 美化界面,提升用戶體驗。通過一個實際的示例項目,我們將展示如何從零開始創建一個包含QSpinBox的GUI應用程序,并通過樣式表對其進行美化。

目錄

  1. 引言
  2. QSpinBox簡介
  3. 使用QSpinBox讓用戶輸入數值(C++實現)
  4. 使用QSS美化界面
  5. 完整代碼示例
  6. 總結
  7. 參考資料

1. 引言

在開發應用程序時,數值輸入是一個常見的需求。Qt框架提供了多種控件來實現這一功能,其中QSpinBox是一個非常強大且靈活的控件。QSpinBox允許用戶通過上下按鈕或鍵盤輸入整數,適用于設置參數如邊框寬度、字體大小等場景。然而,僅僅提供功能是不夠的,一個美觀且易于使用的界面能夠顯著提升用戶體驗。

Qt Style Sheets (QSS) 是Qt框架提供的一個強大的工具,允許開發者通過CSS樣式的語法來美化應用程序的界面。通過QSS,開發者可以輕松地改變控件的顏色、字體、邊距等屬性,從而實現一個視覺上吸引人且一致的界面。

本文將通過一個實際的示例項目,詳細介紹如何使用QSpinBox讓用戶輸入數值,并通過QSS美化界面,提升用戶體驗。所有代碼均使用C++實現,適用于Qt框架。

2. QSpinBox簡介

2.1 QSpinBox的功能

QSpinBox是一個用于輸入和顯示整數的控件。它允許用戶通過上下按鈕或鍵盤輸入數值。QSpinBox的主要功能包括:

  • 設置范圍:定義數值的最大值和最小值。
  • 步長調整:定義每次點擊上下按鈕時數值的變化量。
  • 數值循環:當數值達到最大或最小值時,可以循環回到另一端。
  • 前綴和后綴:可以在數值前或后添加文本,例如“$”符號或“%”。
  • 進制支持:支持十進制、二進制、八進制和十六進制數值的輸入和顯示。
  • 自定義展示格式:允許開發者自定義數值的顯示格式。

2.2 QSpinBox的繼承關系

QSpinBox繼承自QWidget和QObject,因此它支持Qt的信號與槽機制。這意味著開發者可以輕松地將QSpinBox與其他控件或功能模塊集成,實現復雜的交互邏輯。

2.3 QSpinBox的主要屬性和方法

  • 主要屬性

    • minimum:定義數值的最小值。
    • maximum:定義數值的最大值。
    • value:當前顯示的數值。
    • prefix:數值前的文本。
    • suffix:數值后的文本。
    • singleStep:每次點擊上下按鈕時數值的變化量。
  • 主要方法

    • setValue(int value):設置當前數值。
    • value():獲取當前數值。
    • setRange(int min, int max):設置數值的范圍。

3. 使用QSpinBox讓用戶輸入數值(C++實現)

3.1 創建一個包含QSpinBox的GUI應用程序

我們將創建一個簡單的Qt Widgets應用程序,其中包含三個QSpinBox控件,分別用于回答以下問題:

  1. 勇勇有幾個飯碗?
  2. 勇勇有幾個主人?
  3. 國遙有幾條勇勇?

3.1.1 導入必要的庫

在C++中使用Qt框架來創建GUI應用程序。

#include <QApplication>
#include <QWidget>
#include <QLabel>
#include <QSpinBox>
#include <QPushButton>
#include <QVBoxLayout>
#include <QMessageBox>
#include <QFile>
#include <QTextStream>

3.1.2 創建主窗口類

定義一個類SpinBoxExample,繼承自QWidget,用于構建應用程序的主窗口。

class SpinBoxExample : public QWidget {Q_OBJECTpublic:SpinBoxExample(QWidget *parent = nullptr);~SpinBoxExample();private slots:void onSubmit();private:QLabel *label1;QSpinBox *spinBox1;QLabel *label2;QSpinBox *spinBox2;QLabel *label3;QSpinBox *spinBox3;QPushButton *button;QMessageBox *msgBox;
};

3.1.3 實現主窗口類

SpinBoxExample類的實現文件中,初始化界面并設置控件的屬性。

SpinBoxExample::SpinBoxExample(QWidget *parent) : QWidget(parent) {// 設置窗口標題和大小setWindowTitle("QSpinBox示例");resize(300, 200);// 創建垂直布局QVBoxLayout *layout = new QVBoxLayout(this);// 創建第一個SpinBox及其標簽label1 = new QLabel("勇勇有幾個飯碗?", this);spinBox1 = new QSpinBox(this);spinBox1->setRange(1, 10);spinBox1->setValue(1);layout->addWidget(label1);layout->addWidget(spinBox1);// 創建第二個SpinBox及其標簽label2 = new QLabel("勇勇有幾個主人?", this);spinBox2 = new QSpinBox(this);spinBox2->setRange(1, 5);spinBox2->setValue(1);layout->addWidget(label2);layout->addWidget(spinBox2);// 創建第三個SpinBox及其標簽label3 = new QLabel("國遙有幾條勇勇?", this);spinBox3 = new QSpinBox(this);spinBox3->setRange(1, 5);spinBox3->setValue(1);layout->addWidget(label3);layout->addWidget(spinBox3);// 創建按鈕及其點擊事件button = new QPushButton("提交", this);connect(button, &QPushButton::clicked, this, &SpinBoxExample::onSubmit);layout->addWidget(button);// 初始化消息框msgBox = new QMessageBox(this);
}SpinBoxExample::~SpinBoxExample() {delete msgBox;
}void SpinBoxExample::onSubmit() {// 獲取每個SpinBox的值int bowls = spinBox1->value();int owners = spinBox2->value();int yongyong = spinBox3->value();// 顯示結果QString result = QString("勇勇有 %1 個飯碗。\n""勇勇有 %2 個主人。\n""國遙有 %3 條勇勇。").arg(bowls).arg(owners).arg(yongyong);msgBox->setText(result);msgBox->exec();
}

3.1.4 運行應用程序

main函數中初始化應用程序并顯示主窗口。

int main(int argc, char *argv[]) {QApplication app(argc, argv);SpinBoxExample example;example.show();return app.exec();
}

3.2 解釋代碼

  1. 導入庫:使用Qt框架來創建GUI應用程序。
  2. 主窗口類SpinBoxExample類繼承自QWidget,用于構建應用程序的主窗口。
  3. 初始化界面:在構造函數中設置窗口標題、大小,并創建布局和控件。
  4. SpinBox控件:為每個問題創建一個QSpinBox,設置其范圍和初始值,并添加標簽進行說明。
  5. 按鈕和事件處理:創建一個按鈕,并在點擊時調用onSubmit方法,讀取每個SpinBox的值并顯示結果。
  6. 運行應用程序:在main函數中初始化應用程序并顯示主窗口。

通過這個示例,用戶可以通過QSpinBox方便地輸入數值,解決“勇勇有幾個飯碗?”、“勇勇有幾個主人?”以及“國遙有幾條勇勇?”等問題。

4. 使用QSS美化界面

4.1 創建樣式表文件

首先,創建一個樣式表文件(例如 style.qss),并在其中定義所需的樣式。

/* 美化 QSpinBox */
QSpinBox {background-color: #ffffff;border: 1px solid #cccccc;border-radius: 4px;padding: 2px;min-width: 75px;
}QSpinBox::up-button, QSpinBox::down-button {border: 1px solid #cccccc;border-radius: 3px;width: 16px;height: 16px;
}QSpinBox::up-button:hover, QSpinBox::down-button:hover {background-color: #e0e0e0;
}QSpinBox::up-arrow, QSpinBox::down-arrow {color: #444444;
}/* 美化 QPushButton */
QPushButton {background-color: #4CAF50;color: white;border: none;padding: 5px 10px;border-radius: 4px;min-width: 75px;
}QPushButton:hover {background-color: #45a049;
}/* 美化 QLabel */
QLabel {font-family: Arial;font-size: 12px;color: #333333;margin: 5px 0;
}

4.2 在C++代碼中加載樣式表

SpinBoxExample 類的構造函數中,添加代碼以在應用程序啟動時加載樣式表。

SpinBoxExample::SpinBoxExample(QWidget *parent) : QWidget(parent) {// 設置窗口標題和大小setWindowTitle("QSpinBox示例");resize(300, 200);// 加載樣式表QFile styleFile(":/style.qss");if (styleFile.open(QFile::ReadOnly | QFile::Text)) {QTextStream styleStream(&styleFile);QString styleSheet = styleStream.readAll();setStyleSheet(styleSheet);styleFile.close();}// 創建垂直布局QVBoxLayout *layout = new QVBoxLayout(this);// 創建第一個SpinBox及其標簽label1 = new QLabel("勇勇有幾個飯碗?", this);spinBox1 = new QSpinBox(this);spinBox1->setRange(1, 10);spinBox1->setValue(1);layout->addWidget(label1);layout->addWidget(spinBox1);// 創建第二個SpinBox及其標簽label2 = new QLabel("勇勇有幾個主人?", this);spinBox2 = new QSpinBox(this);spinBox2->setRange(1, 5);spinBox2->setValue(1);layout->addWidget(label2);layout->addWidget(spinBox2);// 創建第三個SpinBox及其標簽label3 = new QLabel("國遙有幾條勇勇?", this);spinBox3 = new QSpinBox(this);spinBox3->setRange(1, 5);spinBox3->setValue(1);layout->addWidget(label3);layout->addWidget(spinBox3);// 創建按鈕及其點擊事件button = new QPushButton("提交", this);connect(button, &QPushButton::clicked, this, &SpinBoxExample::onSubmit);layout->addWidget(button);// 初始化消息框msgBox = new QMessageBox(this);
}

4.3 將樣式表添加到資源文件

style.qss 文件添加到項目的資源文件(mainwindow.qrc)中,以便在編譯時包含它。

<!DOCTYPE RCC><RCC version="1.0">
<qresource prefix="/"><file>style.qss</file>
</qresource>
</RCC>

4.4 重新構建項目

在 Qt Creator 中,點擊“構建” -> “構建項目”以重新構建應用程序。

4.5 運行程序

  1. 在 Qt Creator 中,點擊“運行” -> “運行當前項目”。
  2. 程序運行后,界面會顯示美化后的 QSpinBox、按鈕和標簽。
  3. 用戶可以調整每個 QSpinBox 的值,并點擊“提交”按鈕查看結果。

4.6 樣式表解釋

  1. QSpinBox樣式

    • 背景顏色設置為白色。
    • 邊框設置為1像素的灰色。
    • 圓角設置為4像素。
    • 內部填充2像素。
    • 最小寬度設置為75像素。
    • 上下按鈕的樣式和懸停效果也被定義。
  2. QPushButton樣式

    • 背景顏色設置為綠色。
    • 文本顏色設置為白色。
    • 移除邊框。
    • 內部填充5像素高和10像素寬。
    • 圓角設置為4像素。
    • 最小寬度設置為75像素。
    • 懸停時背景顏色變為深綠色。
  3. QLabel樣式

    • 字體設置為Arial,大小12像素。
    • 文本顏色設置為深灰色。
    • 外邊距設置為5像素頂部和底部。

通過這些樣式定義,界面看起來更加現代和專業,提升了用戶體驗。

5. 完整代碼示例

5.1 樣式表文件(style.qss)

QSpinBox {background-color: #ffffff;border: 1px solid #cccccc;border-radius: 4px;padding: 2px;min-width: 75px;
}QSpinBox::up-button, QSpinBox::down-button {border: 1px solid #cccccc;border-radius: 3px;width: 16px;height: 16px;
}QSpinBox::up-button:hover, QSpinBox::down-button:hover {background-color: #e0e0e0;
}QSpinBox::up-arrow, QSpinBox::down-arrow {color: #444444;
}QPushButton {background-color: #4CAF50;color: white;border: none;padding: 5px 10px;border-radius: 4px;min-width: 75px;
}QPushButton:hover {background-color: #45a049;
}QLabel {font-family: Arial;font-size: 12px;color: #333333;margin: 5px 0;
}

5.2 主窗口類(SpinBoxExample.h)

#ifndef SPINBOXEXAMPLE_H
#define SPINBOXEXAMPLE_H#include <QWidget>
#include <QLabel>
#include <QSpinBox>
#include <QPushButton>
#include <QMessageBox>
#include <QVBoxLayout>class SpinBoxExample : public QWidget {Q_OBJECTpublic:SpinBoxExample(QWidget *parent = nullptr);~SpinBoxExample();private slots:void onSubmit();private:QLabel *label1;QSpinBox *spinBox1;QLabel *label2;QSpinBox *spinBox2;QLabel *label3;QSpinBox *spinBox3;QPushButton *button;QMessageBox *msgBox;
};#endif // SPINBOXEXAMPLE_H

5.3 主窗口實現(SpinBoxExample.cpp)

#include "SpinBoxExample.h"
#include <QApplication>
#include <QFile>
#include <QTextStream>SpinBoxExample::SpinBoxExample(QWidget *parent) : QWidget(parent) {// 設置窗口標題和大小setWindowTitle("QSpinBox示例");resize(300, 200);// 加載樣式表QFile styleFile(":/style.qss");if (styleFile.open(QFile::ReadOnly | QFile::Text)) {QTextStream styleStream(&styleFile);QString styleSheet = styleStream.readAll();setStyleSheet(styleSheet);styleFile.close();}// 創建垂直布局QVBoxLayout *layout = new QVBoxLayout(this);// 創建第一個SpinBox及其標簽label1 = new QLabel("勇勇有幾個飯碗?", this);spinBox1 = new QSpinBox(this);spinBox1->setRange(1, 10);spinBox1->setValue(1);layout->addWidget(label1);layout->addWidget(spinBox1);// 創建第二個SpinBox及其標簽label2 = new QLabel("勇勇有幾個主人?", this);spinBox2 = new QSpinBox(this);spinBox2->setRange(1, 5);spinBox2->setValue(1);layout->addWidget(label2);layout->addWidget(spinBox2);// 創建第三個SpinBox及其標簽label3 = new QLabel("國遙有幾條勇勇?", this);spinBox3 = new QSpinBox(this);spinBox3->setRange(1, 5);spinBox3->setValue(1);layout->addWidget(label3);layout->addWidget(spinBox3);// 創建按鈕及其點擊事件button = new QPushButton("提交", this);connect(button, &QPushButton::clicked, this, &SpinBoxExample::onSubmit);layout->addWidget(button);// 初始化消息框msgBox = new QMessageBox(this);
}SpinBoxExample::~SpinBoxExample() {delete msgBox;
}void SpinBoxExample::onSubmit() {// 獲取每個SpinBox的值int bowls = spinBox1->value();int owners = spinBox2->value();int yongyong = spinBox3->value();// 顯示結果QString result = QString("勇勇有 %1 個飯碗。\n""勇勇有 %2 個主人。\n""國遙有 %3 條勇勇。").arg(bowls).arg(owners).arg(yongyong);msgBox->setText(result);msgBox->exec();
}

5.4 主函數(main.cpp)

#include <QApplication>
#include "SpinBoxExample.h"int main(int argc, char *argv[]) {QApplication app(argc, argv);SpinBoxExample example;example.show();return app.exec();
}

6. 總結

通過本文的詳細講解,我們展示了如何使用Qt的QSpinBox控件讓用戶輸入數值,并通過Qt Style Sheets (QSS) 美化界面,提升用戶體驗。我們從零開始創建了一個包含Q

Horse3D游戲引擎研發筆記(一):從使用Qt的OpenGL庫繪制三角形開始
Horse3D游戲引擎研發筆記(二):基于QtOpenGL使用仿Three.js的BufferAttribute結構重構三角形繪制
Horse3D游戲引擎研發筆記(三):使用QtOpenGL的Shader編程繪制彩色三角形
Horse3D游戲引擎研發筆記(四):在QtOpenGL下仿three.js,封裝EBO繪制四邊形
Horse3D游戲引擎研發筆記(五):在QtOpenGL環境下,仿three.js的BufferGeometry管理VAO和EBO繪制四邊形
Horse3D游戲引擎研發筆記(六):在QtOpenGL環境下,仿Unity的材質管理Shader繪制四邊形
**Horse3D游戲引擎研發筆記(七):在QtOpenGL環境下,使用改進的Uniform變量管理方式繪制多彩四邊形 **
Horse3D游戲引擎研發筆記(八):在QtOpenGL環境下,按需加載彩虹四邊形的頂點屬性

Pomian語言處理器 研發筆記(一):使用C++的正則表達式構建詞法分析器

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

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

相關文章

18 繼續學習

要設計出一個好的系統&#xff0c;需要多年的知識積累。有一個捷徑是研究真實世界的系統架構。本文將介紹一些有幫助的閱讀材料。 務必留意那些真實系統之間共通的原理和相同的底層技術。研究每個技術并了解它解決了什么問題&#xff0c; 這是一個鞏固基礎知識和完善設計過程的…

深度學習篇---混淆矩陣

要理解混淆矩陣&#xff08;Confusion Matrix&#xff09;&#xff0c;我們可以從它的名字入手&#xff1a;它本質是一張 “幫你理清模型預測結果到底‘混淆’在哪里” 的表格&#xff0c;核心作用是評估分類模型的表現 —— 比如判斷一張圖片是 “貓” 還是 “狗”、一封郵件是…

MySQL重大隱患!mysqlpump的--set-gtid-purged參數在5.7和8.0的雷區

MySQLPump是MySQL官方提供的一個用于備份和恢復MySQL數據庫的工具。它于MySQL 5.7.8版本中首次引入&#xff0c;旨在提供一種快速、可靠且高效的備份和恢復解決方案。MySQL Pump首次支持了并行導出、壓縮導出&#xff0c;可以利用多核CPU來提高備份能力&#xff0c;在效率上要比…

低質量視頻變高清AI:告別模糊,重現清晰畫質

在數字時代&#xff0c;視頻內容的創作和消費日益普及&#xff0c;然而&#xff0c;許多早期拍攝或存儲的視頻&#xff0c;由于技術限制或壓縮等原因&#xff0c;往往存在畫質不佳的問題&#xff0c;如模糊、噪點多、分辨率低等。這不僅影響觀看體驗&#xff0c;也限制了這些珍…

Linux入門教程 第十二章 防火墻

文章目錄前言一、 iptables 概述Netfilter二、iptables 的表、鏈結構2.1 ptables的四表五鏈結構介紹2.1.1 四表五鏈2.1.2 四表2.1.3 **五鏈**2.2 數據包過濾的匹配流程&#xff08;數據包到防火墻&#xff09;2.2.1 規則鏈之間的匹配順序:主機型防火墻:2.2.2 規則鏈內的匹配順序…

單詞搜索+回溯法

題目&#xff1a;思考&#xff1a; 1.經典回溯 實現&#xff1a; class Solution { public:bool find_word(vector<vector<char>>&board,string word,int pos,int i,int j){bool retfalse;if (posword.size()-1) return board[i][j]word[pos];if (board[i][j…

【嵌入式開發 Linux 常用命令系列 8 -- git checkout 解沖突詳細介紹】

文章目錄1. Git 沖突產生的場景2. 沖突標記符號解釋3. git checkout --ours 和 git checkout --theirs語法含義使用場景4. 操作完成后的流程5. 舉例演示1. Git 沖突產生的場景 當你在 git merge、git rebase、git cherry-pick 等操作時&#xff0c;如果 同一個文件的同一部分在…

16-day13強化學習和訓練大模型

強化學習 強化學習和監督學習是機器學習中的兩種不同的學習范式 強化學習&#xff1a;目標是讓智能體通過與環境的交互&#xff0c;學習到一個最優策略&#xff0c;以最大化長期累積獎勵。 例如&#xff0c;在機器人導航任務中&#xff0c;智能體需要學習如何在復雜環境中移動&…

OpenAI o1:OpenAI最新推出的AI大語言模型,更擅長推理也更貴

本文轉載自&#xff1a;OpenAI o1&#xff1a;OpenAI最新推出的AI大語言模型&#xff0c;更擅長推理也更貴 - Hello123工具導航 ** 一、&#x1f916; OpenAI o1 是什么&#xff1f; OpenAI o1 是 2024 年推出的推理特化型 AI 模型&#xff0c;主打 “慢思考、深分析”&#…

自然語言處理——03 RNN及其變體

1 認識RNN 1.1 概念循環神經網絡 RNN &#xff08;Recurrent Neural Network&#xff0c;簡稱RNN&#xff09;——處理序列數據的神經網絡&#xff1b;一般以序列數據作為輸入&#xff0c;通過網絡內部的結構設計有效捕捉序列之間的關系特征&#xff0c;一般也是以序列形式進行…

量子計算基礎

量子計算 量子計算一般由三個基本步驟組成&#xff1a;制備輸入量子態、對于量子態執行幺正變換以及測量輸出態&#xff0c;這里將介紹這三個基本要素。 1 量子態 與經典計算中比特(bit)的概念相對應&#xff0c;量子計算中最小信息載體和處理單位是量子比特(quantum bit, or t…

Apache Maven 3.1.1 (eclipse luna)

Apache Maven 3.1.1 &#xff08;eclipse luna&#xff09;D:\apache-maven-3.1.1\binMAVEN_HOME:D:\apache-maven-3.1.1PATH:D:\apache-maven-3.1.1\binmvn -vMaven Integration for Eclipse(Luna)

應用篇#1:YOLOv8模型在Windows電腦攝像頭上的部署

一、前言如何部署YOLOv8模型在攝像頭上是完成模型應用必須解決的問題&#xff0c;通過使用“cv2”這個庫&#xff0c;可以完成對電腦攝像頭的調用&#xff08;本人Windows聯想&#xff09;&#xff0c;實時檢測并輸出圖像。二、代碼實現與解讀import warnings import cv2 from …

關于內存泄漏的一場討論

下面是以前&#xff08;大概2003、2004年吧&#xff09;在某BBS上的一場關于內存泄漏的討論。我先原樣貼出當時存檔的&#xff0c;如果C友友興趣&#xff0c;我再整理成文章。發信人: tianshangfei(天上飛的豬), 信區: C 標 題: 什么叫做內存泄漏&#xff0c;誰能定義一下呢 :…

Java全棧開發實戰:從基礎到微服務的深度解析

Java全棧開發實戰&#xff1a;從基礎到微服務的深度解析 一、面試官開場介紹 面試官&#xff08;微笑&#xff09;&#xff1a;你好&#xff0c;我是今天的面試官&#xff0c;我們公司是互聯網大廠&#xff0c;負責前端和后端的全棧開發。今天主要想了解你在技術方面的掌握情況…

深度學習--PyTorch代碼框架

一代碼import torch print(torch.__version__) # 驗證安裝的開發環境是否正確 MNIST 包含 70,000 張手寫數字圖像&#xff1b;60,000 張用于訓練&#xff0c;10,000 張用于測試。 圖像是灰度的&#xff0c;28x28 像素的&#xff0c;并且居中的&#xff0c;以減少預處理和加快運…

LinkedIn 自動消息發送工具

LinkedIn 自動消息發送工具說明文檔 一、項目概述 本項目是一個基于 Python 的自動化工具&#xff0c;用于批量向指定 LinkedIn 用戶發送消息。 核心功能包括&#xff1a; 讀取消息模板和 URL 列表&#xff1b;使用瀏覽器模擬操作&#xff0c;自動發送 LinkedIn 消息&#xff1…

新的 macOS 安裝程序聲稱能夠快速竊取數據,并在暗網上銷售

一種新型 macOS 信息竊取惡意軟件&#xff0c;被命名為 Mac.c&#xff0c;已成為地下惡意軟件即服務 (MaaS) 生態系統中強大的競爭者。 Mac.c 由使用化名“mentalpositive”的威脅行為者公開開發&#xff0c;是臭名昭著的 Atomic MacOS Stealer (AMOS) 的簡化衍生品&#xff0…

我的小灶坑

最近在寫項目 有時候希望有個人能跟我一起來寫 這樣子交流中也能有很多新的想法 但也并不是都是優點 因為我現在不是處于對這個項目的每個步驟都很熟悉的階段。 我覺得一個人從零到一確實能捋順不少 但是我在做項目的時候發現自己經常容易被細節的部分牽制 比如說一個按鈕的樣式…

6.4 Element UI 中的 <el-table> 表格組件

一、 核心組成與基本結構Element UI 的表格主要由以下幾個核心部分構成&#xff1a;<el-table>: 表格的根容器&#xff0c;負責管理數據、選擇、排序、分頁集成等全局狀態。<el-table-column>: 定義表格的一列。表格的列結構由一個或多個 <el-table-column> …