前言
本篇博客是 基于 ElementPlus 快速入门_element plus x-CSDN博客 的进阶
最终成果
完成的要求
1 深入学习 设计 | Element Plus 从里面找自己合适的
- 使用到的 组件有：表格，分页条，表单，卡片
2 具备 前端基础（html，css 样式等前端基础）
正文
接下来，将通过使用element-plus的 组件，向大家展示过程
前期准备
已经构建好一个vue 项目，并且通过vscode 打开
初识Vue3(详细版:创建，启动vue 项目）-CSDN博客
1 选择 element-plus的 组件： 表格，按钮
成果展示
步骤
1 在src 文件夹下,创建vue 文件
- 这里，我定义为article1.vue
2 向 App.vue 导入 创建的vue文件的路径
注意：在template标签中，添加的标签 和导入外部vue 文件命名有关
导入外部文件的格式：import 自定义名字 from 路径
举例
导入 当前目录下的 a.vue 文件
import a from './a.vue 。 注意这里的"a "可以是其他的，什么都行
在template标签中，添加的标签，往往是与你自定义的命名，相关的。这里当你输入一个"<" 时，vscode会有提示！
3 在 element-plus 官网上找到合适的表格组件
这里我选择：基础表单
cv 粘贴到 之前定义的article1 .vue 文件
调整 script 标签的位置，放到template 标签的前面，在package.json 文件点击调试，运行展示
4 调整
- 1 修改表格值，间距
代码
prop 属性：和tableDate数组是绑定在一起的，使得将数组中的数据，关联到表格中
label 属性：表示 表格的第一行各个表头名
html
<script lang="ts" setup>
const tableData = [
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-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" >
</el-table-column>
</el-table>
</template>
- 2 添加 编辑，删除 按钮
type 的属性值可以表示图标的颜色： primary ：蓝色；default：白色； danger: 红色
修改之后的完整代码如下
html
<script lang="ts" setup>
import { Delete, Edit } from '@element-plus/icons-vue'
const tableData = [
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-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" >
<el-button type="primary" :icon="Edit" circle />
<el-button type="danger" :icon="Delete" circle />
</el-table-column>
</el-table>
</template>
效果展示
2 选择 element-plus的 组件： 分页条
成果展示
1 在 element-plus 官网上找到合适的分页条组件
这里我选择： All combined 这种分页方式
2 cv 粘贴对应的代码到article1.vue 文件
将script标签中的代码粘贴到article1.vue
如果 发现script标签中的代码 通过vscode 发现颜色变淡，说明这行代码没有起作用，可以删掉
效果展示
调整
1 将分页表示的区域移动到右边
- 使用内部样式，修改
效果展示
2 修改总页数，页容量，页码
total:数据总量
page-size：页容量
currentPage4：当前页
修改 ：total 改为20，page-size 改为 5
修改后的代码
html
<script lang="ts" setup>
import { Delete, Edit } from '@element-plus/icons-vue'
const tableData = [
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
]
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
const currentPage4 = ref(4)
// 控制每页显示的条目数
const pageSize4 = ref(5)
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}`)
}
</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" >
<el-button type="primary" :icon="Edit" circle />
<el-button type="danger" :icon="Delete" circle />
</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]"
:size="size"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>
<style lang="css" scoped>
.el-p {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
</style>
效果展示
3 选择 element-plus的 组件： 表单
成果展示
步骤
1 在 element-plus 官网上找到合适的 表单
2 cv将对应的代码 粘贴到article.vue 文件
效果展示
3 调整
1 把之前复制 输入框代码删掉，换成 下滑列表方式，同时添加一个重置按钮
代码
html
<script lang="ts" setup>
import { Delete, Edit } from '@element-plus/icons-vue'
const tableData = [
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
]
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
const currentPage4 = ref(4)
// 控制每页显示的条目数
const pageSize4 = ref(5)
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 { 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="文章分类">
<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" >
<el-button type="primary" :icon="Edit" circle />
<el-button type="danger" :icon="Delete" circle />
</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]"
:size="size"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</template>
<style lang="css" scoped>
.el-p {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
</style>
效果展示
4 选择 element-plus的 组件： 卡片
成果展示
步骤
1 在 element-plus 官网上找到合适的 卡片
代码
html
<!-- 卡片 -->
<el-card style="max-width: 480px">
<div class="card-header">
<span>发布文章</span>
<el-button type="primary">文章管理</el-button>
</div>效果展示
2 调整
1文章管理，移动到右边
2 为了使整个界面看着更加美观，将其他的代码移动到卡片代码中
最终代码
html
<script lang="ts" setup>
import { Delete, Edit } from '@element-plus/icons-vue'
const tableData = [
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
{
title: '标题1',
category: '时事',
time: '2021-08-01',
state: '已发布',
},
]
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
const currentPage4 = ref(4)
// 控制每页显示的条目数
const pageSize4 = ref(5)
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 { reactive } from 'vue'
const formInline = reactive({
user: '',
region: '',
date: '',
})
const onSubmit = () => {
console.log('submit!')
}
</script>
<template>
<!-- 卡片 -->
<el-card >
<div class="card-header">
<span>发布文章</span>
<el-button type="primary">文章管理</el-button>
</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" >
<el-button type="primary" :icon="Edit" circle />
<el-button type="danger" :icon="Delete" circle />
</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]"
:size="size"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</el-card>
</template>
<style lang="css" scoped>
.el-p {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
.card-header {
display: flex;
justify-content: space-between;
}
</style>
最终效果展示
总结
本篇博客，简单介绍了，怎么使用element-plus 来构建简单的查询界面
下一步，就该从后端服务器获取数据，进一步完善