Element Plus (面向外卖编程)

news2025/3/16 10:10:23

Element介绍 

使用流程

案例 

Element介绍 

饿了么团队基于 Vue 3 研发的面向设计师和开发者的组件库,访问官网能使用到各种组件样式

  • 组件:组成网页的部件,例如 超链接、按钮、图片、表格、表单、分页条等等。
  • 官网:https://element-plus.org/zh-CN/#/zh-CN

使用流程

在vue项目目录下安装Element Plus组件库

npm install element-plus --save
npm install @element-plus/icons-vue

在项目的main.js文件中引入替换内容

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

在官网中复制想要的组件代码到项目中使用

案例 

在main.js中导入中文语言包

import locale from 'element-plus/dist/locale/zh-ch'

样式组件代码都从官网中复制

完成代码

<template>
  <!-- 卡片 -->
  <el-card>
    <div class="card-header">
      <span>文章管理</span>
      <el-button type="primary">发布文章</el-button>
    </div>

    <div style="margin-top: 20px;">  <hr>  </div>

    <!-- 表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="文章分类">
        <el-select
          v-model="formInline.region"
          placeholder="选择文章分类"
          clearable
        >
          <el-option label="事实" value="事实" />
          <el-option label="美食" value="美食" />
        </el-select>
      </el-form-item>

      <el-form-item label="发布状态">
        <el-select
          v-model="formInline.region"
          placeholder="选择发布状态"
          clearable
        >
          <el-option label="已发布" value="已发布" />
          <el-option label="草稿" value="草稿" />
        </el-select>
      </el-form-item>

      <el-form-item label="发布时间">
        <el-date-picker
          v-model="formInline.date"
          type="date"
          placeholder="选择时间"
          clearable
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="default" @click="onSubmit">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="文章标题" />
      <el-table-column prop="category" label="分类" />
      <el-table-column prop="time" label="发表时间" />
      <el-table-column prop="state" label="状态" />
      <el-table-column label="操作" width="180">
        <rl-row>
          <el-button type="primary" :icon="Edit" circle />
          <el-button type="success" :icon="Delete" circle />
        </rl-row>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <el-pagination
      class="el-p"
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5, 10, 15, 20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="jumper,total, sizes, prev, pager, next"
      :total="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup>
import { Edit, Delete } from "@element-plus/icons-vue";

import { ref, reactive } from "vue";

//表单变量
const formInline = reactive({
  user: "",
  region: "",
  date: "",
});

//分页条变量
const currentPage4 = ref(4);
const pageSize4 = ref(5);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

//表格数据
const tableData = [
  {
    title: "标题1",
    category: "事实",
    time: "2024-05-03",
    state: "已发布",
  },
  {
    title: "标题1",
    category: "事实",
    time: "2024-05-03",
    state: "已发布",
  },
  {
    title: "标题1",
    category: "事实",
    time: "2024-05-03",
    state: "已发布",
  },
  {
    title: "标题1",
    category: "事实",
    time: "2024-05-03",
    state: "已发布",
  },
];
</script>

<style scoped>
.el-p {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.card-header {
  display: flex;
  justify-content: space-between;
}
</style>

实现效果

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

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

相关文章

AI多模态「六边形战士」,原创音乐、1分钟百页PPT、抖音爆款……

2024年AI行业最大的看点是什么&#xff1f; 那一定是多模态AI应用。 大模型发展到今天这个阶段&#xff0c;文本处理已经是各家大模型的必备技能了&#xff0c;对音频、视觉等多模态的理解和应用才是下一个阶段大模型比拼的赛道。 3.5研究测试&#xff1a;hujiaoai.cn 4研究测…

测试驱动编程(3)进阶单元测试(下)

文章目录 测试驱动编程(3)进阶单元测试&#xff08;下&#xff09;示例实战接收同事的需求开始迭代需求故事迭代1故事迭代2故事迭代3故事迭代4故事迭代5故事迭代6 测试驱动编程(3)进阶单元测试&#xff08;下&#xff09; 示例实战 接收同事的需求 你的同事正在开发一个远程…

前端 防抖和节流

在前端开发中&#xff0c;防抖&#xff08;Debounce&#xff09;和节流&#xff08;Throttle&#xff09;是两种常用的性能优化技术&#xff0c;尤其在处理频繁触发的事件时显得尤为重要。无论是在用户输入、窗口调整大小&#xff0c;还是滚动事件中&#xff0c;这两种技术都可…

el-transfer和el-tree进行结合搞一个树形穿梭框

由于业务需求需要在穿梭框里使用树形结构&#xff0c;但是本身element里并不支持&#xff0c;于是参考了别的大佬发的文章作为思路及后续自己新增了一些处理功能。 目录 1.拷贝代码放到自己的项目目录中 2.改造el-transfer的源码 3.修改tree-transfer-panel.vue文件 4.修改…

C语言内存函数超详细讲解

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 C语言内存函数超详细讲解 收录于专栏【C语言学习】 本专栏旨在分享学习C语言学习的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. m…

IDEA打开项目报错

IDEA打开项目报错&#xff1a; Cannot read scheme C:\Users\xxxxxx\AppData\Roaming\JetBrains\IntelliJIdea2023.2\qaplug_profiles\Default.xmljava.lang.AbstractMethodError: Receiver class com.soldevelo.qaplug.scanner.AnalysisProfileManager$2 does not define or i…

浅谈后端boot框架整合第三方技术JUnit MyBatis Druid整体思想

整合第三方技术 不要单单学习指定技术与springboot整合的方式 学习目标的是整合整体的技术的思路 拿到任何一个第三方技术后我们在springboot中如何操作 这是真正我们应该学习的东西 以后能整合任意技术 整合JUnit JUnit 是一个流行的开源测试框架&#xff0c;用于 Java …

frp搭建内网流量转发

前提条件 有一台外网服务器 背景介绍 外网服务器linux内网客户端Windows 10下载frp软件安装包 下载地址:https://github.com/fatedier/frp/releases 服务端软件包下载 客户端软件包下载 服务端部署 解压软件包 tar xzvf frp_0.58.0_linux_amd64.tar.gz修复加压后文件夹名…

解决远程链接的“Gtk-WARNING **: cannot open display;

1.需要检查ssh配置中X11Forwarding是否启用 2.检查本地ssh工具是否启用x11转发&#xff08;下图以mobaxterm为例&#xff09; 3.检查是否有防火墙等其他网络拦截&#xff0c;如果没有特殊需求&#xff0c;这里可以直接将防火墙服务关闭 4.按上诉操作检查后&#xff0c;正常情况…

力扣周赛398题解

特殊数组Ⅰ 如果数组的每一对相邻元素都是两个奇偶性不同的数字&#xff0c;则该数组被认为是一个 特殊数组 。 Aging 有一个整数数组 nums。如果 nums 是一个 特殊数组 &#xff0c;返回 true&#xff0c;否则返回 false。 示例 1&#xff1a; 输入&#xff1a;nums [1] …

工业路由器在工厂数字化的应用及价值

随着科技的飞速发展&#xff0c;数字化转型已成为工厂提高效率、降低成本、实现智能化管理的关键途径。在这个过程中&#xff0c;工业路由器凭借其独特的优势&#xff0c;正逐渐成为工厂数字化建设不可或缺的核心组件。本文将深入探讨工业路由器在工厂数字化中的应用及价值&…

Nuxt3 实战 (七):配置 Supabase 数据库

前言 这个章节我们要先把数据库的环境配置好&#xff0c;古人云&#xff1a;工欲善其事&#xff0c;必先利其器。 这两天我一直在网上寻找最适合 Nuxt 的数据库&#xff0c;之前在做个人项目时经常用的是 Mysql 和 MongoDB&#xff0c;也用过 ORM 框架比如&#xff1a;Sequel…

深入理解循环控制语句 - for

循环就是重复的意思&#xff0c;它是编程中的基石&#xff0c;它使程序能够重复执行某段代码&#xff0c;直至满足特定条件为止。 在Java中&#xff0c;for循环是一种常用的循环结构&#xff0c;它以紧凑的形式实现了迭代过程。 一、for循环基础 1.1 for循环简介 for循环在…

C++容器之无序多集(std::unordered_multiset)

目录 1 概述2 使用实例3 接口使用3.1 construct3.2 assigns3.3 iterators3.4 capacity3.5 find3.6 count3.7 equal_range3.8 emplace3.9 emplace_hint3.10 insert3.11 erase3.12 clear3.13 swap3.14 bucket_count3.15 max_bucket_count3.16 bucket_size3.17 bucket3.18 load_fa…

00.OpenLayers快速开始

00OpenLayers快速开始 官方文档&#xff1a; 快速开始&#xff1a;https://openlayers.org/doc/quickstart.html 需要node环境 一、设置新项目 npm create ol-app my-app cd my-app npm start第一个命令将创建一个名为 my-app​ 的目录&#xff08;如果您愿意&#xff0c;…

【话题】我眼神的IT行业现状与未来趋势

目录 一、挑战 教学资源的重新分配 教师角色的转变 学生学习方式的改变 教育评价体系的挑战 二、机遇 个性化学习 跨学科学习 国际合作与交流 创新教育模式 三、如何培养下一代IT专业人才 更新教育理念 加强基础设施建设 整合课程资源 加强实践教学 培养跨学科…

Golang并发编程-协程goroutine任务取消(Context)

文章目录 前言一、单个任务的取消二、 所有任务取消三、Context的出现Context的定义Context使用 总结 前言 在实际的业务种&#xff0c;我们可能会有这么一种场景&#xff1a;需要我们主动的通知某一个goroutine结束。比如我们开启一个后台goroutine一直做事情&#xff0c;比如…

浅谈C++函数

目录 一、函数的概念二、调用函数的两个前提三、函数传参的三种形式四、函数返回类型 一、函数的概念 函数是C程序的基本模块&#xff0c;通常一个C程序由一个或多个函数组成。函数可以完成用户指定的任务&#xff0c;一般分为库函数和用户自定义的函数。函数由函数头和函数体…

AIGC-常见图像质量评估MSE、PSNR、SSIM、LPIPS、FID、CSFD,余弦相似度----理论+代码

持续更新和补充中…多多交流&#xff01; 参考: 图像评价指标PNSR和SSIM 函数 structural_similarity 图片相似度计算方法总结 MSE和PSNR MSE: M S E 1 m n ∑ i 0 m − 1 ∑ j 0 n − 1 [ I ( i , j ) − K ( i , j ) ] 2 MSE\frac{1}{mn}\sum_{i0}^{m-1}\sum_{j0}^{n-1}[…

重学java 43.多线程 多等待多唤醒案例

Fear never builds the future,but hope does. —— 24.5.25 多等待多唤醒问题 在多条线程同时消费同时等待时&#xff0c;会出现问题 BaoZiPu package S77ThreadMoreWait;/*count和flag可以定义成包装类&#xff0c;但要记得给count和flag手动赋值不然对于本案例来说&#xff…