Kapitel 9 Vue Advanced – Grundlegende Verwendung von Element Plus

Grundlegende Verwendung von Element Plus

element-ui 是基于vue 开发的一套ui组件库，提供丰富的网页开发组件，可用快速开发网站，降低前端开发成本
Das Versionselement hat derzeit zwei Versionen

element-ui：基于vue2
element-plus: 基于vue3

Offizielle Website-Adresse

https://element-plus.org/zh-CN/component/button.html

Element-Plus-Grundverwendung

1.安装
npm install element-plus
2.	在vue项目main.js引入element-plus组件，以及css文件
3.	在官方文档中找到需要的样式组件复制代码对应的.vue中使用。

Der Prozess der Entwicklung einer Website mit elementUI

1.页面布局
2.导航栏
3.每个页面功能开发

1.pycharm erstellt ein Vue-Projekt
2.Initialisierung,

npm install vue-router@4  #导入路由
vue add router   #安装路由
npm install element-plus  #安装插件

3. Platzierungshinweis

4. Stoffstation

Navigationsleiste konfigurieren

<el-container>
  <el-aside width="200px">
    <el-menu
    default-active="2"
    class="el-menu-vertical"
    @open="handleOpen"
    @close="handleClose"
  >
      <el-menu-item index="1">
      <el-icon><icon-menu /></el-icon>
      <span>仪表盘</span>
    </el-menu-item>

    <el-sub-menu index="2">
      <template #title>
        <el-icon><location /></el-icon>
        <span>一级菜单1</span>
      </template>
        <el-menu-item index="2-1">二级菜单1</el-menu-item>
        <el-menu-item index="2-2">二级菜单2</el-menu-item>
        <el-menu-item index="2-3">二级菜单3</el-menu-item>
    </el-sub-menu>

       <el-sub-menu index="3">
      <template #title>
        <el-icon><location /></el-icon>
        <span>二级菜单2</span>
      </template>
        <el-menu-item index="3-1">二级菜单1</el-menu-item>
        <el-menu-item index="3-2">二级菜单2</el-menu-item>
    </el-sub-menu>

Die Konfiguration ist wie in der Abbildung dargestellt abgeschlossen.

Konfigurieren Sie es so, dass es den gesamten Inhaltsbereich ausfüllt

Konfigurieren Sie die Farbe der Navigationsleiste

Dynamisch basierend auf dem Router generiert

Vue-Router-Modus aktivieren. Wenn Sie die Navigation aktivieren, verwenden Sie den Index als Pfad, um einen Routing-Sprung durchzuführen
1. Dynamisches Routing konfigurieren (index.js)
Die vollständige Routing-Konfiguration ist wie folgt

const routes = [
  {
    path: '/',
    name: '仪表板',
    component: Layout
  },
  {
    path: '/nav1',
    name: '一级菜单1',
    component: Layout,
    children: [
        {
    path: '/a',
    name: '页面A',
    component: () => import(/* webpackChunkName: "about" */ '../views/A.vue')
  },
    {
    path: '/b',
    name: '页面B',
    component: () => import(/* webpackChunkName: "about" */ '../views/B.vue')
  },
    ]
  },
  {
    path: '/nav2',
    name: '一级菜单2',
    component: Layout,
    children: [
      {
        path: '/c',
        name: '页面C',
        component: () => import(/* webpackChunkName: "about" */ '../views/C.vue')
      }
    ]
  }
]

2. Konfigurieren Sie die Logik der Navigationsleiste für die Seitenverarbeitung

        <el-menu
        default-active="2"
        class="el-menu-vertical"
        background-color="#304156"
        text-color="#FFFFFF"
        active-text-color="#ffd04b"
        @open="handleOpen"
        @close="handleClose"
        router
      >
          <template v-for="menu in this.$router.options.routes" :key="menu">
               <!--处理没有子路由的菜单-->
              <el-menu-item v-if="!menu.children" :index="menu.path">
                <span>{
   
   {menu.name}}</span>
              </el-menu-item>
              <!--处理子路由的菜单-->
          <el-sub-menu v-else-if="menu.children" :index="menu.path">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{
   
   {menu.name}}</span>
          </template>
            <!--循环二级菜单 -->
            <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{
   
   {child.name}}</el-menu-item>
        </el-sub-menu>
          </template>
      </el-menu>

Seitensymbol konfigurieren

#安装图标
npm     install  @element-plus/icons-vue

Symbol importieren und registrieren

Offizielle Symboladresse

https://element-plus.org/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88

Konfigurieren Sie die Symbole der Navigationsleiste dynamisch

1. Routing ändern
   
   Konfigurieren Sie im Routing-Symbol: „HelpFilled“ das Routing-Schlüsselwort
2. Referenz-Routing-Konfiguration
   

<el-icon><component :is="menu.icon"/></el-icon>

Überprüfung

Implementieren Sie die Faltfunktion der Navigationsleiste
1. Konfigurieren Sie das Faltsymbol

2. Konfigurieren Sie die Faltung Logik a>



Implementieren Sie die Funktion zum Klicken auf das Symbol, um eine kleine Hand anzuzeigen.


Konfigurieren Sie das Protokollsymbol der Navigationsleiste.

Konfigurieren Sie Logo-Stil

Endlich Der Effekt ist wie in der Abbildung gezeigt

Avatar und Dropdown-Box konfigurieren

Dropdown-Feld konfigurieren

        <el-dropdown>
       <span class="el-dropdown-link">
         <img src="../assets/touxiang.png" alt="">
       </span>
       <template #dropdown>
       <el-dropdown-menu>
        <el-dropdown-item>密码修改</el-dropdown-item>
        <el-dropdown-item>退出登录</el-dropdown-item>

      </el-dropdown-menu>
    </template>
  </el-dropdown>

Avatar konfigurieren

Avatar-Stil festlegen

Layout festlegen

Rasterlayout: Erstellen Sie schnell und einfach ein Layout mithilfe der 24 Grundspalten.

el-row 代表行，里面嵌套el-col
el-col  代表列，总分为24列

Attribute

gutter列间隔
span占据的列数

    <el-row  :gutter="10">
      <el-col :span="12">
          <div style="background: green">第一列</div>
      </el-col>
      <el-col :span="12">
          <div style="background: orange">第二列</div>
      </el-col>
    </el-row>
    <br>
     <el-row  :gutter="10">
      <el-col :span="8">
        <div style="background: green">第一列</div>
      </el-col>
      <el-col :span="8">
        <div style="background: orange">第二列</div>
      </el-col>
       <el-col :span="8">
        <div style="background: blueviolet">第三列</div>
      </el-col>
     </el-row>

      <br>
     <el-row  :gutter="10">
      <el-col :span="4">
        <div style="background: green">第一列</div>
      </el-col>
      <el-col :span="5">
        <div style="background: orange">第二列</div>
      </el-col>
       <el-col :span="8">
        <div style="background: blueviolet">第三列</div>
      </el-col>
     </el-row>

Der Anzeigeeffekt ist wie folgt

Karte

Anzeigen von Daten im Schwebezustand, ähnlich einem Karteneffekt.
Codestruktur:

bilden

Das Formular enthält Eingabefelder, Optionsfelder, Dropdown-Auswahlfelder, Mehrfachauswahlfelder und andere Komponenten für Benutzereingaben. Verwenden Sie Formulare, um Daten zu sammeln, zu validieren und zu übermitteln.
Gemeinsame Komponenten von Formularelementen:

el-input: 输入框
el-select: 下拉框
el-checkbox-group 多选框
el-radio-group：单选框

Implementieren Sie Eingabefelder, Auswahlfelder und Einreichungsfelder

<template>
    <h1>这是B页面</h1>
    <el-form :model="form">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">提交</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>

</template>

<script>
export default {
      
      
  name: "B",
  data() {
      
      
    return {
      
      
      form: {
      
      
        name: '',
        age: '',
        sex: ''
      }
    }
  }
}
</script>

<style scoped>

</style>

Formular: Validierungsregeln

Mit der Formularkomponente können Sie überprüfen, ob die Eingaben des Benutzers den Spezifikationen entsprechen, um Fehler zu finden und zu beheben
Nutzungsprozess

1.定义校验规则
2el-form指定“rules” 属性传入定义的校验规则
3.el-form-item指定“prop”属性与校验规则名称对应

Legen Sie Namens-, Alters- und Geschlechtsregeln fest

1. Regeln definieren
   
   2. el-form gibt das Attribut „rules“ an und übergibt die definierten Verifizierungsregeln. el-form-item gibt das Attribut „prop“ an< a i= 2> Verifizierung Passen Sie Verifizierungsregeln an, um festzustellen, ob die beiden Passwörter konsistent sind
   
   
   
   
   

Schaltfläche zum Zurücksetzen des Formulars

Setzen Sie das gesamte Formular zurück, stellen Sie den ursprünglichen Wertzustand wieder her und entfernen Sie die Überprüfungsergebnisse

1.0 Bind el-form

2.0 Bind Reset button< /span>

3.0 Reset-Methode schreiben

Vorabvalidierung vor dem Absenden des Formulars

Überprüfen Sie das gesamte Formular, wenn Sie zum Ausführen auf die Schaltfläche „Senden“ klicken. Dadurch kann die Integrität der Daten effektiv sichergestellt werden.


Übermittlungsformular binden

Überprüfung< /a >


Kehrt normal zurück, wenn die Eingabe korrekt ist

Tabelle: Ränder, Breite, feste Spalten

Tabelleneigenschaften:

border:是否带有纵向边框
data:表格使用的数据，自动渲染
列属性：
prop: 键名，对应数据中的字段
label:列名
width：列宽度
fixed:列是否固定在左侧或者右侧， true 表示固定在左侧
fixed= "right"

1.0 Tabellenkonfiguration

2.0 Tabellendaten schreiben

3.0 Überprüfung

Die Tabellenkomponente bietet Unterstützung für die Radioauswahl. Das Current-Change-Ereignis verwaltet die Ereignisse, die bei Auswahl ausgelöst werden. Es übergibt die aktuellen Daten.

1.0 Bindungsereignisse
2.0 Schreiben einer Einzelauswahllogik

3.0 Verifizierung

3.0 Schreiben einer Mehrfachauswahllogik< /span> a> 2,0 1,0 Daten löschen 3.3 Verifizierung 3.2 Schreiblogik
3.1 Bindung

Sortieren

Sortieren Sie Tabellen, um Daten schnell zu finden oder zu vergleichen

Benutzerdefinierte Vorlage

Benutzerdefinierte Anzeigeinhalte können in Kombination mit anderen Komponenten verwendet werden. Sie werden im Allgemeinen als Betriebsleiste verwendet, z. B. zum Löschen und Bearbeiten.
1.0 Fügen Sie eine Schaltfläche zum Bearbeiten und Löschen hinzu und binden Sie Ereignisse. Aufrufen der Scope-Funktion (scope Get the content of the current line)

2.0 Schreiben, Löschen und Bearbeiten logischer Funktionen

Seitennummerierung

background: 是否为分页按钮添加颜色
page-size  每页的条数
page-sizes 可选每页显示的条数
total 总条目数
layout  分页功能显示内容
current-page: 当前页码改变时触发
size-change 每页显示条目改变触发
current-change 当前页改变时触发

      <!-- 分页-->
          <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[10, 20, 30, 40]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
    />

Feedback-Komponente

Implementieren Sie die Operationslogik zum Löschen des Popup-Felds

1.0 Binden Sie die Löschschaltfläche

2.0 Schreiben Sie die Löschfunktion

3.0 Überprüfung

Formular-Popup-Box

Dialogfeld: informiert den Benutzer und führt zugehörige Vorgänge aus, während der aktuelle Seitenstatus beibehalten wird, geeignet für individuellere Szenarien
1.0 Popup-Box-Logik schreiben

    <el-dialog v-model="dialogFormVisible" title="创建用户">
      <el-form :model="form">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
      </el-form>
       <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
        </span>
      </template>
    </el-dialog>

  <el-button @click="dialogFormVisible = true" >弹出框</el-button>

2.0 Popup-Box-Funktion zum Schreiben

3.0 Verifizierung