前言
本篇博客是 基于 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 属性：表示 表格的第一行各个表头名
<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: 红色
修改之后的完整代码如下
<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
修改后的代码
<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-paginationclass="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 把之前复制 输入框代码删掉，换成 下滑列表方式，同时添加一个重置按钮
代码
<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-selectv-model="formInline.region"placeholder="请选择"clearable><el-option label="时事" value="时事" /><el-option label="篮球" value="篮球" /></el-select></el-form-item><el-form-item label="发布状态"><el-selectv-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-paginationclass="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 官网上找到合适的 卡片
代码
<!-- 卡片 --><el-card style="max-width: 480px"><div class="card-header"><span>发布文章</span><el-button type="primary">文章管理</el-button></div>效果展示
2 调整
1文章管理，移动到右边
2 为了使整个界面看着更加美观，将其他的代码移动到卡片代码中
最终代码
<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-selectv-model="formInline.region"placeholder="请选择"clearable><el-option label="时事" value="时事" /><el-option label="篮球" value="篮球" /></el-select></el-form-item><el-form-item label="发布状态"><el-selectv-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-paginationclass="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 来构建简单的查询界面
下一步，就该从后端服务器获取数据，进一步完善
