当前位置：首页 > wzjs >正文

网站平台开发报价单app注册推广任务平台

wzjs 2025/9/12 2:06:41

网站平台开发报价单,app注册推广任务平台,设计工作室网站,专业放心的企业展厅设计前言本篇博客是基于 ElementPlus 快速入门_element plus x-CSDN博客的进阶最终成果完成的要求 1 深入学习设计 | Element Plus 从里面找自己合适的使用到的组件有：表格，分页条，表单，卡片 2 具备前端基础（ht…

前言

本篇博客是基于 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>

最终效果展示