1.【Element Plus】

已于 2024-09-10 14:24:44 修改
阅读量802 收藏 16
点赞数 11
分类专栏： Vue 文章标签： element plus
于 2024-03-01 16:31:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44378854/article/details/136379809
版权

1. Element Plus 快速入门

Element：是饿了么团队研发的，基于 Vue 3，面向设计师和开发者的组件库。
组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。
官网：https://element-plus.org/zh-CN/#/zh-CN

准备工作
(1) 创建一个工程化的 vue 项目 npm init vue@latest
(2) 参照官方文档，安装 Element Plus 组件库（在当前工程的目录下）：npm install element-plus --save

在这里插入图片描述

在这里插入图片描述

(3) 在 main.js 中引入 Element Plus 组件库（参照官方文档）

在这里插入图片描述

//将自动生成的main.js中的内容全部替换
import { createApp } from 'vue'//导入vue
import ElementPlus from 'element-plus'//导入element-plus
import 'element-plus/dist/index.css'//导入element-plus的样式
import App from './App.vue'//导入App.vue

const app = createApp(App)//创建应用实例

app.use(ElementPlus)//使用element-plus
app.mount('#app')//控制html元素

制作组件

(1) 访问 Element官方文档

在这里插入图片描述

(2) 复制组件代码

在这里插入图片描述

(3) 根据需要进行调整

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

<template>
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>
  
    <el-row class="mb-4">
      <el-button plain>Plain</el-button>
      <el-button type="primary" plain>Primary</el-button>
      <el-button type="success" plain>Success</el-button>
      <el-button type="info" plain>Info</el-button>
      <el-button type="warning" plain>Warning</el-button>
      <el-button type="danger" plain>Danger</el-button>
    </el-row>
  
    <el-row class="mb-4">
      <el-button round>Round</el-button>
      <el-button type="primary" round>Primary</el-button>
      <el-button type="success" round>Success</el-button>
      <el-button type="info" round>Info</el-button>
      <el-button type="warning" round>Warning</el-button>
      <el-button type="danger" round>Danger</el-button>
    </el-row>
  
    <el-row>
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </el-row>
  </template>

在 API 中，还有属性等可以设置：

在这里插入图片描述

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

<template>
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <!--设置属性-->
      <el-button type="primary" disabled="true">编辑</el-button>
      <el-button type="success" loading="true">查看</el-button>
    </el-row>
  
    <el-row class="mb-4">
      <el-button type="info" plain>Info</el-button>
      <el-button type="warning" plain>Warning</el-button>
      <el-button type="danger" plain>Danger</el-button>
    </el-row>
  </template>

在这里插入图片描述

在 App.vue 中引入 Button.vue

<script setup>
  import ButtonVue from "./Button.vue"
</script>

<template>
  <ButtonVue/>
</template>

2. 常用组件

2.1 表格

(1) 找到表格组件

在这里插入图片描述

下面以基础表格为例来进行演示：

在这里插入图片描述

(2) 复制表格组件的代码

<script lang="ts" setup>
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>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>
</template>

(3) 修改原始的表格代码

<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: '已发布'
    }
]
</script>

<template>
    <!-- 表格 -->
    <!-- :data属性为表格绑定数据，绑定的数据为tableData -->
    <el-table :data="tableData" style="width: 100%">
        <!-- prop属性给每一列绑定每一条数据里面指定属性的值 -->
        <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">
            <!-- 最后一列的编辑和删除按钮 -->
            <el-row>
                <el-button type="primary" :icon="Edit" circle />
                <el-button type="danger" :icon="Delete" circle />
            </el-row>
        </el-table-column>
    </el-table>
</template>  

<style scoped>
</style>

在这里插入图片描述

2.2 分页条

(1) 找到分页条组件

在这里插入图片描述

(2) 复制分页条组件的代码

在这里插入图片描述

(3) 修改代码

在这里插入图片描述

在 main.js 中导入中文环境，不然分页条上的文字是英文

在这里插入图片描述

<script lang="ts" setup>

// 准备分页条所需的数据
import { ref } from 'vue'

const currentPage4 = ref(2)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

</script>

<template>
    <!-- 分页条 -->
    <!-- v-model:current-page 当前展示的第几页 -->
    <!-- v-model:page-size 每页默认展示的条数 -->
    <!-- page-sizes下拉选择每页显示的条数 -->
    <!-- small 分页条显示的大小 -->
    <!-- disabled分页条是否禁用 -->
    <!-- layout控制分页条的显示顺序/布局 -->
    <!-- total 总条数,正常来说会绑定一个变量 -->
    <!-- @size-change="handleSizeChange": 修改每页显示的条数时，回调的函数是handleSizeChange -->
    <!-- @current-change="handleCurrentChange": 当点击了页签或前往第几页后，回调的函数是handleCurrentChange -->
    <!-- 这两个函数的参数分别是每页显示的条数和当前页 -->
    <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" />
    
</template>  

<style scoped>
/* 分页条的样式 */
.el-p {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;/*右对齐*/
}
</style>

在这里插入图片描述

2.3 表单

(1) 找到表单组件

在这里插入图片描述

(2) 复制表单组件的代码

<script lang="ts" setup>

// 表单所需的数据
import { reactive } from 'vue'

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

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

<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="Approved by">
            <el-input v-model="formInline.user" placeholder="Approved by" clearable />
        </el-form-item>
        <el-form-item label="Activity zone">
            <el-select v-model="formInline.region" placeholder="Activity zone" clearable>
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
        </el-form-item>
        <el-form-item label="Activity time">
            <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Query</el-button>
        </el-form-item>
    </el-form>
</template>  

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

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>

(3) 修改原始的表单代码

<script lang="ts" setup>

// 准备表单所需的数据
import { reactive } from 'vue'

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

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

</script>

<template>
    <!-- 表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- 在下拉选择时，两个下拉表单最终展示的内容是相同的
        这是因为两个下拉列表绑定的都是formInline.region数据
        实际开发中只要将二者绑定上不同的数据就不会出现该问题了 -->
        <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>
            <!-- type控制按钮的样式 -->
            <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>
    
</template>  

<style scoped>
/* 下拉列表的样式 */
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>

在这里插入图片描述

2.4 卡片

(1) 找到卡片组件

在这里插入图片描述

(2) 复制卡片组件的代码

<script lang="ts" setup>

</script>

<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>Card name</span>
                <el-button class="button" text>Operation button</el-button>
            </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div>
        <template #footer>Footer content</template>
    </el-card>
</template>  

<style scoped>

</style>

(3) 修改代码

<script lang="ts" setup>

</script>

<template>
    <el-card class="box-card">
        <div class="card-header">
            <span>文章管理</span>
            <el-button type="primary" >发布文章</el-button>
        </div>
        <!-- 分隔线 -->
        <div style="margin-top: 20px;">
            <hr/>
        </div>
        <!-- 其他内容也写到卡片里面 -->
    </el-card>
</template>  

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

在这里插入图片描述

3. 案例整合

最终效果：

在这里插入图片描述

main.js

import { createApp } from 'vue'//导入vue
import ElementPlus from 'element-plus'//导入element-plus
import 'element-plus/dist/index.css'//导入element-plus的样式
import App from './App.vue'//导入App.vue
// 导入中文语言环境
import locale from 'element-plus/dist/locale/zh-cn.js'

const app = createApp(App)//创建应用实例

app.use(ElementPlus, {locale})//使用element-plus
app.mount('#app')//控制html元素

App.vue

<script setup>
  import ArticleVue from "./Article.vue"
</script>

<template>
  <ArticleVue/>
</template>

Article.vue

<script lang="ts" setup>

// 准备表单所需的数据
import { reactive } from 'vue'

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

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

// 准备分页条所需的数据
import { ref } from 'vue'

const currentPage4 = ref(2)
const pageSize4 = ref(5)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

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: '已发布'
    }
]
</script>

<template>
    <!-- 卡片 -->
    <el-card class="box-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">
        <!-- 在下拉选择时，两个下拉表单最终展示的内容是相同的
        这是因为两个下拉列表绑定的都是formInline.region数据
        实际开发中只要将二者绑定上不同的数据就不会出现该问题了 -->
        <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>
            <!-- type控制按钮的样式 -->
            <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>

    <!-- 表格 -->
    <!-- :data属性为表格绑定数据，绑定的数据为tableData -->
    <el-table :data="tableData" style="width: 100%">
        <!-- prop属性给每一列绑定每一条数据里面指定属性的值 -->
        <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">
            <!-- 最后一列的编辑和删除按钮 -->
            <el-row>
                <el-button type="primary" :icon="Edit" circle />
                <el-button type="danger" :icon="Delete" circle />
            </el-row>
        </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <!-- v-model:current-page 当前展示的第几页 -->
    <!-- v-model:page-size 每页默认展示的条数 -->
    <!-- page-sizes下拉选择每页显示的条数 -->
    <!-- small 分页条显示的大小 -->
    <!-- disabled分页条是否禁用 -->
    <!-- layout控制分页条的显示顺序/布局 -->
    <!-- total 总条数,正常来说会绑定一个变量 -->
    <!-- @size-change="handleSizeChange": 修改每页显示的条数时，回调的函数是handleSizeChange -->
    <!-- @current-change="handleCurrentChange": 当点击了页签或前往第几页后，回调的函数是handleCurrentChange -->
    <!-- 这两个函数的参数分别是每页显示的条数和当前页 -->
    <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>  

<style scoped>
/* 卡片的样式 */
.card-header{
        display: flex;/*弹性盒布局*/
        justify-content: space-between;/*两端对齐，项目之间的间隔相等*/
    }

/* 下拉列表的样式 */
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

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

/* 分页条的样式 */
.el-p {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;/*右对齐*/
}
</style>
【组件库】element-plus组件库
充电五分钟...
07-09 3955
参考：Vue3 ts环境下的PropType，如下title: "标题一",description: "描述一",},title: "标题二",description: "描述二",},非setup语法糖的环境中使用PropType 定义props数据类型// 1. 在“./prop”这个文件中定义并导出： 类型 CompProps// 2. 在子组件中接收props
ELement Plus
热门推荐
weixin_43731078的博客
10-05 2万+
Element Plus相关知识
elementPlus.docx
03-05
elementPlus离线开发文档
element-plus 的简单应用
最新发布
等什么君！的博客
03-26 2229
本篇博客，简单介绍了，怎么使用element-plus 来构建简单的查询界面下一步，就该从后端服务器获取数据，进一步完善。
element-plus.rar
02-20
最新的element-plus静态文件资源包，下载之后，可直接在页面引入，根据最新的vue3+element-plus 直接静态引入
element-plus文档
u012399690的博客
12-03 691
原先一直使用的官方在线文档,其实速度也还行。一来二去想着能不能部署到本地。在此对过程做下记录。还有一个在用的鸡贼的解决方案。使用虚拟机啥的安装一个飞牛nas，通过飞牛nas来拉取镜像。如果恰巧有一个nas或者小型服务器,可以考虑docker部署,更加的方便。的的gh-pages分支包含了文档,下载即可。然后,进入到element-plus目录。只clone gh-pages分支。来自动化导入导出镜像这一过程。启动服务有很多种方式。
ElementPlus
weixin_72222809的博客
07-16 1189
一个对自己学习和工作的记录（elementui）
element-plus离线文档
05-07
element-plus离线文档，node服务已经配置好，直接node server.js即可使用，可以在内网部署，已经部署成功。
element-plus(element-plus@2.8.1/element-plus-2.8.1) 本地离线资源
08-27
/npm/element-plus@2.8.1/dist 37.2K /npm/element-plus@2.8.1/es 36.4K /npm/element-plus@2.8.1/lib /npm/element-plus@2.8.1/theme-chalk 394 /npm/element-plus@2.8.1/attributes.json /npm/element-...
element-plus-1.1.0-beta.15.zip
08-24
一个 Vue.js 3 UI 库
element-plus-2.3.6.zip
08-24
一个 Vue.js 3 UI 库
element-plus-2.8.0.zip
08-24
一个 Vue.js 3 UI 库
elementPlus 离线文档
05-03
elementPlus 离线文档
element-plus-1.0.2-beta.40.zip
08-24
一个 Vue.js 3 UI 库
ElementPlus的简单使用
qq_53118426的博客
07-12 9740
Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。官方网站：https://element-plus.org/zh-CN/#/zh-CN链接:link。
本地部署element-plus文档
奔跑的程序员的博客
02-20 4884
本地tomcat部署element-plus文档，element-plus官网访问慢503、404等问题
根据Element-plus官方文档进行安装(2024.11)
qq_62527610的博客
11-04 1273
给新手的根据官方文档安装element-plus教程。
Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染、多级表头) - 个人使用总结
ymzhao
03-13 2万+
element-plus@2.2.0 后提供的虚拟化表格组件，解决表格数据过大导致的卡顿等性能问题。相对于表格组件，用法上区别还是挺大的，尤其是一些附加的功能，例如排序、筛选、自定义单元格/表头渲染等等。本文参照官网文档、示例，结合个人使用总结，演示虚拟化表格的基本使用，记录上述附加功能的基本实现。除组件的相关接口需要按照官网规范使用外，示例中的其它具体实现的方法仅作参考。
element-plus
qianduan2001_5的博客
06-26 349
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并引入。
Vue.js 3 UI库Element Plus版本2.0.6发布
1. Element Plus简介 Element Plus是一个基于Vue.js 3的UI库，旨在为开发者提供一套丰富的组件集合，以便快速构建高质量的用户界面。Element Plus遵循Vue 3的组合式API风格，提供了包括按钮、输入框、表单、导航等多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值