Element Plus

news2024/11/22 2:25:04

在这里插入图片描述
快速入门:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
然后我在src下创建了一个Button.vue文件,再去Element-plus官网查找组件的源码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
常用组件
表格:
在这里插入图片描述

<script lang="ts" setup>
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'

const tableData = [
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  },
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  },
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  },
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  },
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  }, {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  }



]
</script>

<template>
  <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">
      <div>
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="danger" :icon="Delete" circle />
      </div>
    </el-table-column>
  </el-table>
</template>

在这里插入图片描述
分页条:
在这里插入图片描述
如果想用把英语边为中文需要在main.js中导包:

import locale from ‘element-plus/dist/locale/zh-cn.js’

然后在使用的时候:

app.use(ElementPlus,{locale})

在这里插入图片描述
但是这个次序好像有点问题!
在这里插入图片描述

在这里插入图片描述
但是发现这个100条也太夸张了 也修改一下
在这里插入图片描述
将这里改为你喜欢的就好了
剩下的都是一样自己尝试着修改

<script lang="ts" setup>import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const total = ref(20)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'

const tableData = [
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  },
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  },
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  },
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  },
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  }, {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  }



]
</script>

<template>
  <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">
      <div>
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="danger" :icon="Delete" circle />
      </div>
    </el-table-column>
  </el-table>


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


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

表单：
在这里插入图片描述
卡片：
在这里插入图片描述

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

const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}





import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
const total = ref(20)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'

const tableData = [
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  },
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  },
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  },
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  },
  {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  }, {
    title: '标题1',
    category: '时事',
    time: '2000-01-01',
    state: '已发布',
  }



]
</script>

<template>

  <el-card style="max-width:100%">
    <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>
        <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">
        <div>
          <el-button type="primary" :icon="Edit" circle />
          <el-button type="danger" :icon="Delete" circle />
        </div>
      </el-table-column>
    </el-table>


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

</template>


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

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

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

在这里插入图片描述

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

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

相关文章

界面控件DevExpress WPF中文教程：网格视图数据布局的列和卡片字段

界面控件DevExpress WPF中文教程：网格视图数据布局的列和卡片字段

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…
阅读更多...
实现两个表格的数据传递（类似于穿梭框）

实现两个表格的数据传递（类似于穿梭框）

类似于element的 第一个表格信息以及按钮&#xff1a; <div style"height: 80%"><el-table :data"tableData1" border :cell-style"{text-align:center}" style"width: 100%;"ref"multipleTable1"selection-chang…
阅读更多...
NPOI 实现Excel模板导出

NPOI 实现Excel模板导出

记录一下使用NPOI实现定制的Excel导出模板&#xff0c;已下实现需求及主要逻辑 所需Json数据 对应参数 List<PurQuoteExportDataCrInput> listData [{"ItemName": "电缆VV3*162*10","Spec": "电缆VV3*162*10","Uom":…
阅读更多...
凸函数与深度学习调参

凸函数与深度学习调参

问题1&#xff1a;如何区分凸问题和凹问题&#xff1f; 问题2&#xff1a;深度学习如何区分调参&#xff1f;
阅读更多...
DBeaver MACOS 安装 并连接到docker安装的mysql

DBeaver MACOS 安装 并连接到docker安装的mysql

官网下载&#xff1a;Download | DBeaver Community 网盘下载&#xff1a;链接: https://pan.baidu.com/s/15fAhbflHO-AGc-uAnc3Rjw?pwdbrz9 提取码: brz9 下载驱动 连接测试 报错 null, message from server: "Host 172.17.0.1 is not allowed to connect to this M…
阅读更多...
php：使用socket函数创建WebSocket服务

php：使用socket函数创建WebSocket服务

一、前言 闲来无事&#xff0c;最近捣鼓了下websocket&#xff0c;但是不希望安装第三方类库&#xff0c;所以打算用socket基础函数创建个服务。 二、构建websocket服务端 <?phpclass SocketService {// 默认的监听地址和端口private $address 0.0.0.0;private $port 8…
阅读更多...
@RequestBody、@Data、@Validated、@Pattern(regexp=“?“)（复习）

@RequestBody、@Data、@Validated、@Pattern(regexp=“?“)（复习）

目录 一、注解RequestBody。 二、注解Data。 三、注解Validated、Pattern(regexp"?")。 1、完成实体参数&#xff08;对象属性&#xff09;校验。 2、NotNull、NotEmpty、Email。 一、注解RequestBody。 &#xff08;如&#xff1a;JSON格式的数据——>Java对象&…
阅读更多...
基于YOLOv8深度学习的医学影像骨折检测诊断系统研究与实现(PyQt5界面+数据集+训练代码)

基于YOLOv8深度学习的医学影像骨折检测诊断系统研究与实现(PyQt5界面+数据集+训练代码)

本论文深入研究并实现了一种基于YOLOV8深度学习模型的医学影像骨折检测与诊断系统&#xff0c;旨在为医学影像中的骨折检测提供高效且准确的自动化解决方案。随着医疗影像技术的快速发展&#xff0c;临床医生需要从大量复杂的医学图像中精确、快速地识别病灶区域&#xff0c;特…
阅读更多...
69.x的平方根-力扣（LeetCode）

69.x的平方根-力扣（LeetCode）

题目&#xff1a; 解题思路&#xff1a; 解决本题主要运用的方法是二分法&#xff0c;二分法是一种在有序数组中查找某一特定元素的搜索算法。鉴于本题满足整个序列是有序的&#xff0c;并且可以通过比较来改变区间&#xff0c;满足二分法的应用条件&#xff0c;所以采用二分法…
阅读更多...
Notepad++--在开头快速添加行号

Notepad++--在开头快速添加行号

原文网址&#xff1a;Notepad--在开头快速添加行号_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Notepad怎样在开头快速添加行号。 需求 原文件 想要的效果 方法 1.添加点号 Alt鼠标左键&#xff0c;从首行选中首列下拉&#xff0c;选中需要添加序号的所有行的首列&#xff…
阅读更多...
新兴数据仓库设计与实践手册：从分层架构到实际应用（二）

新兴数据仓库设计与实践手册：从分层架构到实际应用（二）

本手册将分为三部分发布&#xff0c;以帮助读者逐步深入理解数据仓库的设计与实践。 第一部分介绍数据仓库的整体架构概述&#xff1b;第二部分深入讨论ETL在数仓中的应用理论&#xff0c;ODS层的具体实现与应用&#xff1b;第三部分将围绕DW数据仓库层、ADS层和数据仓库的整体…
阅读更多...
java八股-SpringCloud微服务-Eureka理论

java八股-SpringCloud微服务-Eureka理论

文章目录 SpringCloud架构Eureka流程Nacos和Eureka的区别是&#xff1f;CAP定理Ribbon负载均衡策略自定义负载均衡策略如何实现&#xff1f;本章小结 SpringCloud架构 Eureka流程 服务提供者向Eureka注册服务信息服务消费者向注册中心拉取服务信息服务消费者使用负载均衡算法挑…
阅读更多...
MySQL —— explain 查看执行计划与 MySQL 优化

MySQL —— explain 查看执行计划与 MySQL 优化

文章目录 explain 查看执行计划explain 的作用——查看执行计划explain 查看执行计划返回信息详解表的读取顺序&#xff08;id&#xff09;查询类型&#xff08;select_type&#xff09;数据库表名&#xff08;table&#xff09;联接类型&#xff08;type&#xff09;可用的索引…
阅读更多...
input file结合vue3和vant实现上传图片效果，并显示上传进度百分比%

input file结合vue3和vant实现上传图片效果，并显示上传进度百分比%

这里写自定义目录标题 采用的dom结构是input file&#xff0c;label事件绑定&#xff0c;一下为代码传入参数为uploadNum实现效果如图上传中&#xff0c;图片1上传成功&#xff0c;图片2 采用的dom结构是input file&#xff0c;label事件绑定&#xff0c;一下为代码 传入参数为…
阅读更多...
CSS优化file控件样式

CSS优化file控件样式

<div class"file-box"><input type"button" class"btn" value"选择文件" /><inputtype"file"class"file"id"upimg"change"previewFiles"multiple/></div><!-- Vu…
阅读更多...
AJAX笔记 (速通精华版)

AJAX笔记 (速通精华版)

AJAX&#xff08;Asynchronous Javascript And Xml&#xff09; 此笔记来自于动力节点最美老杜 传统请求及缺点 传统的请求都有哪些&#xff1f; 直接在浏览器地址栏上输入URL。点击超链接提交 form 表单使用 JS 代码发送请求 window.open(url)document.location.href urlwi…
阅读更多...
某校园网登录界面前端加密绕过

某校园网登录界面前端加密绕过

前言 尝试对学校校园网登录框进行爆破&#xff0c;发现密码在前端被加密了 Burp抓包 抓包信息 DDDDD2022***&upass3d5c84b6fb1dc75987884f39c05b0e6a123456782&R10&R21&para00&0MKKey123456&v6ip From表单提交上来的文本这些参数&#xff0c;DDDD是…
阅读更多...
《生成式 AI》课程 第3講 CODE TASK执行文章摘要的机器人

《生成式 AI》课程 第3講 CODE TASK执行文章摘要的机器人

课程 《生成式 AI》课程 第3講&#xff1a;訓練不了人工智慧嗎&#xff1f;你可以訓練你自己-CSDN博客 任务1:总结 1.我们希望你创建一个可以执行文章摘要的机器人。 2.设计一个提示符&#xff0c;使语言模型能够对文章进行总结。 model: gpt-4o-mini,#gpt-3.5-turbo, import…
阅读更多...
Github客户端工具github-desktop使用教程

Github客户端工具github-desktop使用教程

文章目录 1.客户端工具的介绍2.客户端工具使用感受3.仓库的创建4.初步尝试5.本地文件和仓库路径5.1原理说明5.2修改文件5.3版本号的说明5.4结合码云解释5.5版本号的查找 6.分支管理6.1分支的引入6.2分支合并6.3创建测试仓库6.4创建测试分支6.5合并分支6.6合并效果查看6.7分支冲…
阅读更多...
python实战案例----使用 PyQt5 构建简单的 HTTP 接口测试工具

python实战案例----使用 PyQt5 构建简单的 HTTP 接口测试工具

python实战案例----使用 PyQt5 构建简单的 HTTP 接口测试工具 文章目录 python实战案例----使用 PyQt5 构建简单的 HTTP 接口测试工具项目背景技术栈用户界面核心功能实现结果展示完整代码总结 在现代软件开发中&#xff0c;测试接口的有效性与响应情况变得尤为重要。本文将指导…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023