Element Plus 基本使用

已于 2024-03-25 14:36:35 修改
阅读量5.3k 收藏 31
点赞数 17
分类专栏： Vue学习 文章标签： javascript 前端 开发语言
于 2024-03-23 21:47:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62377885/article/details/136935668
版权

一、概述

1.1介绍

Element Plus 基本使用

element-ui 是基于vue 开发的一套ui组件库，提供丰富的网页开发组件，可用快速开发网站，降低前端开发成本
版本 element目前有两个版本

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

官网地址

https://element-plus.org/zh-CN/

element-plus 基本使用

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

具体部署请看快速开始 

1.2网页基础布局

icon组件

安装

pnpm install @element-plus/icons-vue

在main.ts中进行全局挂载

官网图标地址

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

Container 布局容器

<div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </div>

我们将这个布局抽离为两个组件，分别为一个header组件和一个aside组件，接下来开始抽离。

模板组件分离

header组件
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<template>
<div>
    <el-header style="display: flex; font-size: 16px;">
    <!-- 左侧部分，包含侧边栏展开/折叠图标 -->
      <div style="display: inline-flex; flex: 1; align-items: center; justify-content: left;">
        <!-- 展开图标（非折叠状态时显示） -->
        <el-icon v-show="!showIcon.isCollapse" @click="collapseAside" style="color: #303133;">
          <Fold />
        </el-icon>
        <!-- 折叠图标（折叠状态时显示） -->
        <el-icon v-show="showIcon.isCollapse" @click="collapseAside" style="color: #303133;">
          <Expand />
        </el-icon>
      </div>

      <!-- 右侧工具栏区域 -->
      <div class="toolbar">
        <!-- 用户头像 -->
        <div class="block" style="margin-right: 10px;">
          <el-avatar :size="40" :src="Avatar" />
        </div>
        <!-- 用户名文本 -->
        <span>管理员</span>
        
        <!-- 下拉菜单，包含更多操作选项 -->
        <el-dropdown trigger="click">
          <!-- 设置图标 -->
          <el-icon style="margin-left: 18px; margin-top: 1px; color: #303133;">
            <setting />
          </el-icon>
          
          <!-- 下拉菜单内容模板 -->
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>View</el-dropdown-item>
              <el-dropdown-item>Add</el-dropdown-item>
              <el-dropdown-item @click="LogOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
</div>
</template>
<script setup lang="ts">
import Avatar from '@/assets/touxiang.jpg'
import { ref } from 'vue'
// eslint-disable-next-line vue/no-dupe-keys, @typescript-eslint/no-unused-vars
const isCollapse = ref(true)
// 获取父组件传递过来的数据 
const showIcon = defineProps({
    isCollapse: Boolean
})

// 获取父组件自定义的事件
const emit = defineEmits(['changeAside'])

// 自定义按钮点击事件，侧边栏的收缩按钮
const collapseAside = () => {
    emit('changeAside')
}

// 登出按钮
const LogOut = ()=>{
  
}

</script>

<style>
.el-header {
    width: 100%;
    background-color: #fff;
    color: var(--el-text-color-primary);
    box-shadow: var(--el-box-shadow);
}

.toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
    text-align: right;
}

.el-dropdown-menu__item {
    width: 120px;
}

.icon-color {
    color: white;
}
</style>
aside组件
<script setup>
import { Monitor } from '@element-plus/icons-vue';
import { ref } from 'vue'

const settings = defineProps({
  collapse: Boolean,
  width: String
})

const iconColor = ref('color:#F8FAFB')
</script>

<template>
  <el-aside :width="settings.width">
    <el-scrollbar>
      <el-menu :default-openeds="['1', '3']" 
      :collapse="settings.collapse" active-text-color="#ffd04b"
        background-color="#304156" text-color="#FFFFFF" router="true">

      <el-menu-item index="1">
      <el-icon><Monitor /></el-icon>
      <template #title>仪表板</template>
      </el-menu-item>
     
      <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Menu />
            </el-icon><span>文章管理</span>
          </template>
          <el-menu-item index="/admin/articles">文章管理列表</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon>
              <Message />
            </el-icon><span>评论管理</span>
          </template>
          <el-menu-item index="/admin/comments">评论管理列表</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <Files />
            </el-icon><span>模块管理</span>
          </template>
          <el-menu-item index="/admin/blocks">模块管理列表</el-menu-item>
        </el-sub-menu>

    </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<style scoped>
.el-aside {
  height: 100vh;
  overflow: hidden;
  box-shadow: var(--el-box-shadow-lighter);
}

.el-scrollbar {
  height: 100vh;
  overflow: hidden;
  background-color: #304156;
}

.el-menu {

  border-right: none;
}</style>
动态路由
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: '仪表盘',
      component: HomeView
    },
    {
      path: '/article',
      name: '文章管理',
      component: HomeView,
      children: [
        {
          path: '/id',
          name: '文章管理列表',
          component: () => (
            '../views/A.vue'
          )
        }
      ]
   },
   {
    path: '/comment',
    name: '评论管理',
    component: HomeView,
    children: [
      {
        path: '/id',
        name: '评论管理列表',
        component: () => (
          '../views/B.vue'
        )
      }
    ],
    
 },
  ]
})

export default router

侧边栏代码改进

<template>
  <el-aside :width="settings.width">
    <el-scrollbar>
      <el-menu :default-openeds="['1', '3']" 
      :collapse="settings.collapse" active-text-color="#ffd04b"
        background-color="#304156" text-color="#FFFFFF" router="true">
    <template v-for="menu in this.$router.options.routes" :key="menu">
    <!-- 当前菜单项没有子菜单时 -->
    <el-menu-item v-if="!menu.children" :index="menu.path">
      <el-icon><component :is="menu.icon" ></component> </el-icon>
      <span>{{menu.name}}</span>
    </el-menu-item>
    
    <!-- 当前菜单项有子菜单时 -->
    <el-sub-menu v-else-if="menu.children" :index="menu.path">
      <template #title>
        <el-icon><component :is="menu.icon" ></component> </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>
  1. Element Plus Icon组件：如果你正在使用 Element Plus UI 库，你可以直接使用其提供的 Icon 组件来显示图标。你可以在路由配置中使用该组件作为路由菜单的一部分，例如在meta字段中定义图标名称，然后在导航菜单的组件中动态渲染它。
  2. SVG图标：你可以使用 SVG 格式的图标，并在你的 Vue 组件中直接引入它们。这种方法允许你在路由配置中指定不同的 SVG 文件，并在导航菜单中显示它们。
  3. @iconify/vue：这是一个流行的图标库，提供了多种图标集的支持。你可以通过这个库来在你的 Vue 项目中使用图标，包括在路由中。你可以选择适合你项目的图标集，并在路由配置中指定相应的图标类名。

整合

<script setup>
import { ref } from 'vue'

// 组件注册
import Header from '@/components/Header.vue'

import Aside from '@/components/Aside.vue'

const asideSettings = ref({
    isCollapse:true,
    width:'200'
})

// 给子组件绑定事件，通过子组件emit从而改变父组件的值
const changeAside = ()=>{
   asideSettings.value.isCollapse = !asideSettings.value.isCollapse
   if(asideSettings.value.isCollapse){
    asideSettings.value.width = "64"
   }else{
    asideSettings.value.width = "200"
   }
}

</script>
<template>
  <el-container style="min-height: 100vh;min-width: 100vw;overflow: hidden;">
    <Aside :collapse="asideSettings.isCollapse" :width="asideSettings.width"></Aside>
    <el-container style="height: 100vh;width:100%;display: flex;flex-direction: column;">
      <Header :isCollapse="asideSettings.isCollapse"  @changeAside="changeAside"></Header>
      <el-main>
        <div v-if="$route.path === '/'">
          <el-card>
            <h1>文本内容</h1>
          </el-card>
        </div>
        <router-view v-else></router-view>
        
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>

body{
  background-color: #eee;
  max-width: 100vw;
  overflow: hidden;
}

.el-main {
  width: 100%;
  padding: 0;
  height: 100vh;
  overflow-x: hidden;
}

</style>

1.3基础布局知识

盒子模型拆分网页

在你的 UserController 的上面加个小注解

@CrossOrigin

`@CrossOrigin` 注解是 Java 中 Spring 框架提供的一种用于处理跨域请求的方法。跨域请求通常出现在前后端分离的 Web 应用中，当前端和后端部署在不同的域名或端口下时，浏览器会因为同源策略（Same-origin policy）而阻止跨域请求。

使用 `@CrossOrigin` 注解可以允许来自不同域的请求访问后端资源。该注解可以应用于类级别和方法级别，用于配置 CORS（CORS：跨域资源共享）相关的参数。

下面是一个示例代码，演示如何在 Spring 中使用 `@CrossOrigin` 注解：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://example.com", maxAge = 3600)
public class MyController {

    @GetMapping("/api/data")
    @CrossOrigin(methods = ["GET"], allowedHeaders = ["Content-Type"])
    public String getData() {
        // 处理跨域请求的逻辑
        return "Hello, World!";
    }
}

在上述代码中，`@CrossOrigin` 注解应用于类级别和方法级别。类级别的注解允许来自 `http://example.com` 域的请求访问所有方法。方法级别的注解进一步限制了只允许 `GET` 方法的跨域请求，并指定了允许的请求头为 `Content-Type`。

通过配置 `@CrossOrigin` 注解，可以实现对跨域请求的灵活控制，确保安全性和数据的正确交互。

二、Element Plus 基本样式

2.1按钮

<template>
        <h3>按钮</h3>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>

        <hr>
        <h3>按钮属性</h3>
        <el-button plain>朴素按钮</el-button>
        <el-button round>圆角按钮</el-button>
        <el-button circle>圆</el-button>
        <el-button disabled>禁用按钮</el-button>
        <el-button loading>加载中</el-button>

        <hr>
        <h3>尺寸</h3>
        <el-button size="large">大型按钮</el-button>
        <el-button>默认按钮</el-button>
        <el-button size="small">小型按钮</el-button>
    </template>

2.2图标

<template>
        
        <h3>图标</h3>
        <el-icon><Plus /></el-icon>
        <el-icon><Edit /></el-icon>
        <el-icon><Delete /></el-icon>
        <el-icon class="is-loading"><Loading /></el-icon>

        <hr>
        <h3>属性</h3>
        <el-icon size="30" color="red"><Search /></el-icon>

        <hr>
        <h3>按钮</h3>
        <el-button type="primary">
            <el-icon><Search /></el-icon>
            <span> 搜索 </span>
        </el-button>

        <el-button type="primary">
            <el-icon><Search /></el-icon>
        </el-button>

        <el-button type="primary" circle>
            <el-icon><Search /></el-icon>
        </el-button>

        <hr>
        <h3>按钮组</h3>
        <el-button-group>
            <el-button type="primary">
                <el-icon><Plus /></el-icon>
            </el-button>

            <el-button type="primary">
                <el-icon><Edit /></el-icon>
            </el-button>

            <el-button type="primary">
                <el-icon><Delete /></el-icon>
            </el-button>
        </el-button-group>

    </template>

2.3提示框

<script setup lang="ts">
 import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'

// 消息
const openMsg = () => {
    ElMessage({
        type: 'success', // success | warning | info | error
        message: 'hello world',
        showClose: true
    })
}

// 确认框
const openConfirm = () => {
    ElMessageBox.confirm('确认删除?', '标题', {
        type: 'warning',
        confirmButtonText: '确认',
        cancelButtonText: '取消'
    }).then(() => {
        console.log('确认')
    }).catch(() => {
        console.log('取消')
    })
}

// 通知
const openNotifiy = () => {
    ElNotification({
        title: '标题',
        message: '烟雨平生',
        duration: 1500 // 展示时间 [单位:毫秒]
    })
}

// 通知2
const openNotifiy2 = () => {
    ElNotification({
        type: 'success', // success | warning | info | error
        title: '标题',
        message: 'hello world',
        duration: 1500,
        position: 'bottom-right'
    })
}
</script>
<template>
<div>
    <el-button @click="openMsg">消息</el-button>
    <el-button @click="openConfirm">确认框</el-button>
    <el-button @click="openNotifiy">通知</el-button>
    <el-button @click="openNotifiy2">通知2</el-button>
</div>
</template>

2.4导航

详情请见导航

2.5标签页

标签页详情请见标签页

<script setup lang="ts">
import { ref, reactive } from 'vue'

        //默认选中的标签名称
        const selectedName = ref("2")

        //选中标签触发的回调
        const tabClick = (tab, event) => {
            console.log("tab", tab.props, "event", event)
        }

        const tab = reactive({
            arr: [
                { name: "1", title: '烟雨', content: '内容1' },
                { name: "2", title: '烟雨平生', content: '内容2' },
                { name: "3", title: 'com', content: '内容3' },
            ]
        })

        //添加
        const tabAdd = () => {
            let index = tab.arr.length
            index++

            tab.arr.push({
                name: index,
                title: '新选项卡' + index,
                content: '内容' + index
            })
        }

        //移除
        const tabRemove = (name) => {
            console.log("name:", name)

            const index = tab.arr.findIndex((value) => {
                return value.name === name
            })

            tab.arr.splice(index, 1) //移除元素
        }

</script>
<template>
<div>
    <h3>标签页</h3>
        <el-tabs v-model="selectedName" @tab-click="tabClick">
            <el-tab-pane label="烟雨" name="1">内容1</el-tab-pane>
            <el-tab-pane label="烟雨平生" name="2">内容2</el-tab-pane>
            <el-tab-pane label="com" name="3">内容3</el-tab-pane>
        </el-tabs>

        <h3>卡片风格</h3>
        <el-tabs v-model="selectedName" @tab-click="tabClick" type="card">
            <el-tab-pane label="烟雨" name="a">内容1</el-tab-pane>
            <el-tab-pane label="烟雨平生" name="b">内容2</el-tab-pane>
            <el-tab-pane label="com" name="c">内容3</el-tab-pane>
        </el-tabs>

        <h3>带有边框的卡片风格</h3>
        <el-tabs v-model="selectedName" @tab-click="tabClick" type="border-card">
            <el-tab-pane label="烟雨" name="A">内容1</el-tab-pane>
            <el-tab-pane label="烟雨平生" name="B">内容2</el-tab-pane>
            <el-tab-pane label="com" name="C">内容3</el-tab-pane>
        </el-tabs>

        <h3>动态添加</h3>
        <el-button @click="tabAdd">添加</el-button>

        <el-tabs v-model="selectedName" @tab-remove="tabRemove" closable type="card">
            <el-tab-pane v-for="(value, key) in tab.arr" :key="value.name" :label="value.title" :name="value.name">
                {{ value.content }}
            </el-tab-pane>
        </el-tabs>

</div>
</template>

2.6输入框

详情请见输入框 

<script setup lang="ts">
import { ref } from 'vue'
        
        const name = ref('')
        const password = ref('')
        const content = ref('烟雨平生')
        const url = ref('com')
        const url2 = ref('code')
        const email = ref('123456')

        //const selected = ref('')
        const selected = ref('2') //选中的下拉框
</script>
<template>
 <div style="width: 300px;">
            <!-- clearable 可一键清空 -->
            <h3>输入框</h3>
            <el-input v-model="name" clearable placeholder="请输入用户名" />

            <!-- show-password 可切换显示隐藏密码 -->
            <h3>密码框</h3>
            <el-input v-model="password" show-password placeholder="请输入密码" />

            <h3>文本域</h3>
            <el-input type="textarea" v-model="content" rows="2" />

            <h3>输入内容长度限制 - 输入框</h3>
            <el-input v-model="name" maxlength="10" show-word-limit />

            <h3>输入内容长度限制 - 文本域</h3>
            <el-input type="textarea" v-model="content" maxlength="20" rows="3" show-word-limit />

            <h3>尺寸</h3>
            大 <el-input size="large" />
            默认 <el-input />
            小 <el-input size="small" />

            <h3>前置</h3>
            <el-input v-model="url">
                <template #prepend>https://</template>
            </el-input>

            <h3>后置</h3>
            <el-input v-model="email">
                <template #append>@qq.com</template>
            </el-input>

            <h3>前置后置</h3>
            <el-input v-model="url2">
                <template #prepend>https://</template>
                <template #append>.com</template>
            </el-input>

            <h3>前置后置扩展 - 搜索</h3>
            <el-input placeholder="请输入课程名称">
                <template #prepend>
                    <el-select v-model="selected" placeholder="请选择" style="width: 100px;">
                        <el-option label="前端" value="1" />
                        <el-option label="后端" value="2" />
                        <el-option label="服务端" value="3" />
                    </el-select>
                </template>
                <template #append>
                    <el-button>
                        <el-icon><Search /></el-icon>
                    </el-button>
                </template>
            </el-input>
        </div>
</template>

 2.7单选框、复选框

详情请见单选框

多选框

2.8下拉框 

详情请见下拉选择器

<script setup lang="ts">
 import { ref,reactive } from 'vue'
        
        const selected = ref('2')
        const selected2 = ref('')
        const selected3 = ref('C')
        const selected4 = ref(['1','3'])

        const data = reactive({
            options: [
                { value: 'A', label: '前端', },
                { value: 'B', label: '后端', },
                { value: 'C', label: '服务端', }
            ]
        })

        //回调
        const selectChange = (val) => {
            console.log("selectChange:", val)
        }
</script>
<template>
  <div style="width: 300px;">
            <h3>下拉框</h3>
            <el-select v-model="selected" placeholder="请选择">
                <el-option value="1" label="前端" />
                <el-option value="2" label="后端" />
                <el-option value="3" label="服务端" />
            </el-select>

            <h3>下拉框 - 事件绑定</h3>
            <el-select v-model="selected2" @change="selectChange" placeholder="请选择">
                <el-option value="a" label="前端" />
                <el-option value="b" label="后端" />
                <el-option value="c" label="服务端" />
            </el-select>

            <h3>动态下拉框</h3>
            <el-select v-model="selected3" placeholder="请选择">
                <el-option v-for="item in data.options" 
                :value="item.value" 
                :label="item.label"
                :key="item.value" />
            </el-select>

            <h3>多选 - multiple</h3>
            <el-select v-model="selected4" multiple @change="selectChange" placeholder="请选择">
                <el-option value="1" label="前端" />
                <el-option value="2" label="后端" />
                <el-option value="3" label="服务端" />
            </el-select>
        </div>
</template>

 2.9日期选择器

详情请见日期选择器

2.10表单

2.11对话框

详情请见对话框

 <script setup>
        import { ref } from 'vue'

        const data = ref({
            name: '',
            radio: '',
            checkbox: [],
            date: '',
            select: '',
            multipleSelect: [],
            textarea: ''
        })

        const add = () => {
            console.log(data.value)
        }

        const reset = () => {
            data.value = {
                name: '',
                radio: '',
                checkbox: [],
                date: '',
                select: '',
                multipleSelect: [],
                textarea: ''
            }
        }

        //对话框
        const dialog = ref(false)

        const dialogClose = () => {
            console.log("关闭")
        }
    </script>

    <template>
        <el-button @click="dialog = true">打开</el-button>

        <!-- draggable 允许拖拽 -->
        <el-dialog v-model="dialog" width="500" title="标题" draggable @close="dialogClose">
            <el-form label-width="80">
                <el-form-item label="文本框">
                    <el-input v-model="data.name" placeholder="请填写名称" />
                </el-form-item>

                <el-form-item label="单选框">
                    <el-radio-group v-model="data.radio">
                        <el-radio value="1">前端</el-radio>
                        <el-radio value="2">后端</el-radio>
                        <el-radio value="3">服务端</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="复选框">
                    <el-checkbox-group v-model="data.checkbox">
                        <el-checkbox value="a">前端</el-checkbox>
                        <el-checkbox value="b">后端</el-checkbox>
                        <el-checkbox value="c">服务端</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="日期时间">
                    <el-date-picker v-model="data.date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" />
                </el-form-item>

                <el-form-item label="下拉框">
                    <el-select v-model="data.select" placeholder="请选择">
                        <el-option value="A" label="前端" />
                        <el-option value="B" label="后端" />
                        <el-option value="C" label="服务端" />
                    </el-select>
                </el-form-item>

                <el-form-item label="多选框">
                    <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
                        <el-option value="AA" label="前端" />
                        <el-option value="BB" label="后端" />
                        <el-option value="CC" label="服务端" />
                    </el-select>
                </el-form-item>

                <el-form-item label="文本域">
                    <el-input type="textarea" v-model="data.textarea" rows="2" placeholder="请填写内容" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="add">添加</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </template>

 2.12表格

详情请见表格

 三、实战进阶

3.1设置布局

栅格布局：通过基础的24分栏，迅速便捷创建布局，

el-row 代表行，里面嵌套el-col
el-col  代表列，总分为24列
属性
gutter列间隔
span占据的列数

<script setup>
import { ref } from 'vue' 
</script>

<template>
 
<div>
    <h3>这是A页面的栅格</h3>
    <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>
</div>
</template>

<style scoped></style>

 3.2表单：校验规则

表单包含输入框，单选框，下拉选择，多选框等用户输入的组件。使用表单可以收集，验证和提交数据。
表单项常用组件：

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

表单：校验规则

表单组件允许你校验用户的宿儒是否符合规范，来帮助你找到和纠正错误
使用流程

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


<script setup lang="ts">
import { reactive ,ref} from 'vue';
import { ElForm, FormInstance , FormRules} from 'element-plus';
// 导入 ElForm 组件的实例类型

interface FormModel {
  name: string;
  age: string;
  sex: string;
}

const form = reactive<FormModel>({
  name: 'BO',
  age: '',
  sex: ''
});

const formRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入年龄', trigger: 'blur' }
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ]
};

const formRef = ref<FormInstance>()
// 定义表单引用并赋予正确类型
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      
      console.log('submit!')
      console.log(form)
      formEl.resetFields()
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<template>
<div>
    <H3>这是B界面</H3>
    <el-form :model="form" :rules = "formRules" ref ="formRef">
        <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="submitForm(formRef)">提交</el-button>
          <el-button  @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
</div>
</template>

3.3表格

边框，宽度，固定列

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

卡片

悬浮展示数据，类似于卡片效果。

详情请见卡片

<script setup lang="ts">
import { ref, reactive } from 'vue';
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

</script>
<template>
<div>
    <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>用户列表</span>
      </div>
    </template>
    <el-button type="primary">新增数据</el-button>

    <div style="margin:0 10px">
    <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" align = 'center' />
    <el-table-column prop="name" label="姓名" width="180" align = 'center'/>
    <el-table-column prop="address" label="地址" align = 'center'/>
   </el-table>
    </div>
   
    </el-card>
</div>
</template>

弹窗

<script setup lang="ts">
import { computed,  ref, reactive, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogFormVisible = ref(false)

const GlobalIndex = ref(-1)

const name = ref('')
interface User {
  name: string;
  city: string;
  age: number;

}

const tableData = reactive<Array<User>>([
  {
    date: '2016-05-03',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const now =  reactive(new Date());
let form = reactive({
  date: now.toISOString().substring(0, 10),
  name: '',
  address: '',
})

const handeAdd = () => {
    form = reactive({
      date: now.toISOString().substring(0, 10),
      name: '',
      address: '',
    })
    dialogFormVisible.value = true
}
const save = () => {
  if(GlobalIndex.value >=0){
    console.log(GlobalIndex.value)
   tableData[GlobalIndex.value] = form
   GlobalIndex.value = -1
  }
  else{
    tableData.push(form)
  }
  dialogFormVisible.value = false
}

const handleEdit = (row,index) => {
  const newobj = Object.assign({}, row)
  form = reactive(newobj)
  GlobalIndex.value = index
  dialogFormVisible.value = true
}

const handleDelete = (index: number) => {
  ElMessageBox.confirm('是否删除该条数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    tableData.splice(index, 1); // 删除指定索引的数据
    ElMessage({
      type: 'success',
      message: '删除成功!'
    });
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消删除'
    });
  });
};

// 搜索关键字状态管理
const searchValue = ref('');

// 定义计算属性，根据搜索关键字过滤表格数据
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !searchValue.value ||
      data.name.toLowerCase().includes(searchValue.value.toLowerCase())
  )
);

// 监听 searchValue 的变化
watch(searchValue, (newValue, oldValue) => {
  if (!newValue) {
    filterTableData.value = tableData;
  }
});
// 搜索功能的实现
const search = () => {
  searchValue.value = name.value;
  console.log(searchValue.value); // 更新搜索关键字为输入框的值
};

</script>
<template>
<div>
    <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>用户列表</span>
      </div>
    </template>
    <!-- Element UI Input 组件，用于输入搜索名称 -->
    <el-input style="width:300px" placeholder="请输入名称" v-model="name" clearable></el-input>

    <!-- Element UI 主题样式按钮，点击后执行搜索动作 -->
    <el-button type="primary" @click="search" style="margin-left:5px">搜索</el-button>
    <el-button type="primary" @click="handeAdd" >新增数据</el-button>

    <div style="margin:0 10px">
    <el-table :data="filterTableData" style="width: 100%">
    <el-table-column prop="date" label="日期" sortable  width="180" align = 'center' />
    <el-table-column prop="name" label="姓名" width="180" align = 'center'/>
    <el-table-column prop="address" label="地址" align = 'center'/>
    <el-table-column  align = 'right'>
        <template #default="scope">
        <el-button link type="primary" size="small" @click="handleEdit(scope.row,scope.$index)"
          >编辑</el-button>
        <el-button link type="danger" size="small" @click.prevent="handleDelete(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
   </el-table>
    </div>

    <el-dialog v-model="dialogFormVisible" title="信息"  width="50%"> 
    <el-form :model="form" label-width="100px" style="padding-right: 30px;" >
      <el-form-item label="日期" >
        <el-input v-model="form.date" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名" >
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址" >
        <el-input v-model="form.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  </el-card>

</div>

</template>

分页·

详情请看分页

const total = ref(10)
const pageNum = ref(1)
const pageSize = ref(1)



<div style = "margin: 15px 0">
      <el-pagination background layout="sizes, prev, pager, next" 
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[1, 5,10]"
      :total="total" 
      @size-change="load"
      @current-change="load"/>
    </div>

国际化

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
  locale: zhCn,
})

日期选择器

详情请见日期选择器

<el-date-picker
        v-model="value2"
        type="date"
        placeholder="Pick a day"
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
        :size="size"
      />

3.4轮播图

<script setup lang="ts">
import img1 from '@/assets/lunbo1.png';
import img2 from '@/assets/lunbo2.png';
import img3 from '@/assets/lunbo3.png';
import img4 from '@/assets/lunbo4.png';
const carouselData = [
  { url: img1 },
  { url: img2 },
  { url: img3 },
  { url: img4 },
]
</script>
<template>
<div>
    <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in carouselData" :key="item.url">
            <img :src="item.url" alt="轮播图片" style="width: 100%; height: 200px;"/>
            <h3>{{ item.url }}</h3>
      </el-carousel-item>
  </el-carousel>
</div>
</template>

<style>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

</style>

3.5面包屑

详请参考https://juejin.cn/post/7087003440773070856

路由

<template>
    <div class="breadcrumb">
      <!-- 使用 element-plus 的面包屑组件 -->
      <el-breadcrumb separator="/">
        <!-- 循环渲染面包屑导航项 -->
        <el-breadcrumb-item v-for="(crumb, index) in breadcrumbs" :key="index">
          <!-- 使用路由链接包装每个面包屑导航项 -->
          <router-link :to="crumb.to">{{ crumb.title }}</router-link>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </template>
  
  <script setup lang="ts">
  // 导入所需的模块
import { computed } from 'vue';
import { useRouter } from 'vue-router';
  
  // 获取当前路由实例
  const router = useRouter();
  
  // 使用 computed 函数计算面包屑导航项
  const breadcrumbs = computed(() => {
    // 从当前路由匹配的规则中筛选出带有 isBreadcrumb 元信息的规则
    const matchedRoutes = router.currentRoute.value.matched.filter(route => route.meta && route.meta.isBreadcrumb);
    // 根据匹配到的路由规则生成面包屑导航项
    return matchedRoutes.map(route => ({
      to: route.path, // 面包屑导航项的链接路径
      title: route.meta.title, // 面包屑导航项的标题
    }));
  });
  </script>
  
  <style scoped>
  .breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start; 
    text-align: right;
    margin: 0 20px;
    flex: 1;
  }
  </style>

烟雨平生9527
关注
  • 17
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
element-plus的基本使用和图标一起使用
海阔天空
03-28 2098
element-plus的图标不显示的问题及组件和图标一起使用
vue使用Element-plus
六月Bing的博客
12-28 793
用法 1.下载资源文件 npm install element-plus --save 2.引入 完整引入 如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。 main.ts import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(Ap
element-plus 的使用
weixin_42350100的博客
08-10 786
element-plus 使用
Vue3与Element-plus整合及项目实战
sinat_30844883的博客
05-14 7771
Element-plus简介是ElementUI的升级版，是一套基于vue2与vue3的桌面端组件库，它提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的前端页面。
ElementPlus的简单使用
最新发布
qq_53118426的博客
07-12 2650
Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。官方网站：https://element-plus.org/zh-CN/#/zh-CN链接:link。
Vue3+Elementplus+Axios 入门教程详解
majingbobo的博客
10-29 3668
Vue3+Elementplus+Axios 入门教程
Element Plus 教程(beta版，适配 Vue 3.0 的 Element).pdf
02-28
官网最新Element Plus 教程(beta版，适配 Vue 3.0 的 Element)
Element-Plus使用
weixin_48221105的博客
12-24 2458
Element-Plus使用
Element-Plus的使用
weixin_67547176的博客
10-09 4415
【了解】常见UI组件库【掌握】Element-Plus基本使用【掌握】Element-Plus常见组件【掌握】Element-Plus购物车。
ElementPlus基本用法
baobao95的专栏
04-13 854
Element Plus 是一个基于 Vue 3 的组件库，它提供了一系列丰富的组件，用于快速构建高质量的Vue应用程序。Element Plus常见元素的用法示例。在你的Vue项目中，你可以全局或按需引入Element Plus组件。在开始之前，你需要确保已经安装了Element Plus。安装Element Plus。
一款基于vue3+typescript+element plus的HTML5富文本编辑器.zip
02-13
Element Plus则是基于Vue 2和Vue 3的UI组件库，提供了一系列美观、易于使用的界面元素，可以快速构建企业级应用。 描述中提到的“html5开发”，表明这个项目专注于HTML5技术，HTML5是现代Web开发的标准，它的新特性...
使用vue3+element-ui plus 快速构建后台管理模板
10-17
例如，对于用户管理模块，你可以使用Element UI Plus的表格组件显示用户列表，配合表单组件创建和编辑用户信息： ```html <!-- 表格列定义 --> 编辑用户" :visible.sync="dialogVisible"> <!-- 表单字段...
element-plus打包
05-24
"element-plus打包" 指的是将 Element Plus 项目进行构建和打包的过程，以便在实际项目中使用。这个过程通常涉及以下步骤和知识点： 1. **项目初始化**： - `package.json` 文件是项目的核心配置文件，包含了项目...
Vue3 Element-Plus Tree组件基本使用
白瑕 的博客
04-29 1万+
快速呈现出简易的一个Tree组件.
element-plus使用步骤
kangkang212916的博客
06-28 2223
1, 安装环境版本要求(此处环境): node: V18.12 npm: V8.12 cnpm: V9.0 yarn: V1.22.19 (或者用yarn安装依赖)2, 按需引入配置后,组件无需再手动引入,会在根目录生成components.d.ts文件,会在此文件中自动引入页面中使用到的组件。4, element-plus 官方在网络差的情况下, 会被路由定向到404页, 一般刷新几下即可恢复。3, icon图标组件组件单独下载安装@element-plus/icons-vue并引入。
element-plus的使用——基础积累
yehaocheng520的博客
11-09 1万+
工作中在做后台管理系统时，经常用到的是vue2.x适用的element-ui框架，最近看到同事用支持vue3.x的element-plus，感觉同事真的是与时俱进，今天就来看看element-plus框架如何使用。 1.安装element-plus框架 npm install element-plus 2.main.js中全局引入element-plus 引入element-plus分为全局引入和局部引入，但是为了简单，一般都是全局引入，这样也有弊端，比如下载的组件太多，导致打包速度缓慢等。但是引入只需要一
Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染、多级表头) - 个人使用总结
热门推荐
ymzhao
03-13 2万+
element-plus@2.2.0 后提供的虚拟化表格组件，解决表格数据过大导致的卡顿等性能问题。相对于表格组件，用法上区别还是挺大的，尤其是一些附加的功能，例如排序、筛选、自定义单元格/表头渲染等等。本文参照官网文档、示例，结合个人使用总结，演示虚拟化表格的基本使用，记录上述附加功能的基本实现。除组件的相关接口需要按照官网规范使用外，示例中的其它具体实现的方法仅作参考。
[vue3] Element Plus 入门使用
沫洺的博客
09-15 2520
Element Plus 入门使用
element-plus使用图标
07-28
要在 Element Plus 中使用图标，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了 Element Plus。您可以使用 npm 或 yarn 进行安装： ```bash npm install element-plus ``` 或者 ```bash yarn add element-plus ``` 2. 在您的项目中导入 Element Plus 的样式和图标。您可以选择在您的入口文件（如 `main.js`）中导入样式： ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 请注意，您需要替换 `App` 为您自己的根组件。 3. 现在，您可以在您的组件中使用 Element Plus 的图标了。例如，要在按钮上使用图标，可以使用 `ElButton` 组件并设置 `icon` 属性为图标名称： ```vue <template> <el-button type="primary" icon="el-icon-search">搜索</el-button> </template> ``` 在上面的示例中，我们使用了名为 `el-icon-search` 的搜索图标。 4. 您还可以在其他 Element Plus 组件中使用图标，比如菜单、导航、表格等等。具体的图标名称和用法可以参考 Element Plus 的官方文档。 这就是使用 Element Plus 中的图标的基本步骤。希望能对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

烟雨平生9527

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值