Vue3实战学习（Element-Plus常用组件的使用(轮播图、日期时间选择器、表格、分页组件、对话框)(超详细)）(下)(6)

目录

一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)

二、Element-Plus常用组件使用(输入框、下拉框、单选框多选框、el-image图片)(上)。博客链接如下。

三、Element-Plus常用组件的使用。(轮播图、日期选择器、时间选择器、日期时间选择器、数据表格、分页组件、对话框)

（1）el-carousel。(走马灯/轮播图)

<1>核心标签。

<2>代码示例。

（2）DatePicker。(日期选择器)

<1>核心标签。

<2>代码示例。

<3>日期格式。(format与value-format)

format。(指定输入框格式)

value-format。(指定绑定值格式)

<4>日期范围选择器。

（?xxx?xxx:xxx）安全属性访问机制。

（3）DateTimePicker。(日期时间选择控制器)

<1>核心标签。

<2>代码示例。

<3>日期、时间格式。(YYYY-MM-DD、HH:mm:ss)

（4）TimePicker。(时间选择器)

<1>核心标签。

<2>代码示例。

<3>时间格式。

（5）Table。(表格)

<1>基本使用。

<2>斑马纹(stripe)表格。

<3>边框(border)表格。

<4>Pagination。(分页-表格)

核心分页样式。

核心属性介绍。

插槽(scope)。(表格操作栏)(重点)

<5>Dialog。(对话框/弹窗)

一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)

Vue3实战学习（Vue环境配置、快速上手及卸载、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像）(1)-CSDN博客
Vue3实战学习（IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程）(2)-CSDN博客
Vue3实战学习（Vue3的基础语法学习与使用(超详细)）(3)_vue3 {... }-CSDN博客
Vue3实战学习（Vue3集成Element-Plus(常用依赖、插件安装与导入。按钮、图标组件。自定义主题的实现)(超详细)）(4)-CSDN博客

二、Element-Plus常用组件使用(输入框、下拉框、单选框多选框、el-image图片)(上)。博客链接如下。

Vue3实战学习（Element-Plus常用组件的使用(输入框、下拉框、单选框多选框、el-image图片)）(上)(5)-CSDN博客

三、Element-Plus常用组件的使用。(轮播图、日期选择器、时间选择器、日期时间选择器、数据表格、分页组件、对话框)

（1）el-carousel。(走马灯/轮播图)

官方文档。

<1>核心标签。

外标签：<el-carousel>。
内标签：<el-carousel-item>。

使用场景：在整个页面的核心位置以图片和文字的形式宣传产品。
为了演示首先可以准备几张图片并将其放在自己指定目录下。

本地目录路径下的静态图片的导入方式。

<2>代码示例。
<template><div>
<div style="margin: 30px"><el-carousel height="400px" style="width: 650px"><el-carousel-item v-for="item in data.images" :key="item">
<img style="width: 100%" height="400px" :src="item" alt="风景"></el-carousel-item></el-carousel></div></div>
</template><script setup>import {reactive} from "vue";
import lun1 from '@/assets/lun01.png'
import lun2 from '@/assets/lun02.png'
import lun3 from '@/assets/lun03.png'//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],
})</script>
页面渲染效果。

（2）DatePicker。(日期选择器)

官方文档。

<1>核心标签。

<el-date-picker>。

<2>代码示例。

<!--  日期选择器  --><div style="margin: 30px;"><el-date-pickerv-model="data.date"type="date"placeholder="请选择一个日期"/> <span style="margin-left: 10px">{{data.date}}</span>
</div>

import {reactive} from "vue";//定义数据的常用方式
const data = reactive({date:'',
})

页面渲染效果。

默认展示的是标准的日期格式。（不是很直观！）
这样的数据不适合存储在数据库中

<3>日期格式。(format与value-format)

format。(指定输入框格式)
代码示例。

<!--  日期选择器  --><div style="margin: 30px;"><el-date-pickerv-model="data.date"type="date"format="YYYY/MM/DD"placeholder="请选择一个日期"/> <span style="margin-left: 10px">{{data.date}}</span>
</div>

import {reactive} from "vue";//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],date:'',
})

页面渲染效果。

value-format。(指定绑定值格式)
代码示例。

<!--  日期选择器  --><div style="margin: 30px;"><el-date-pickerv-model="data.date"type="date"format="YYYY/MM/DD"placeholder="请选择一个日期"/> <span style="margin-left: 10px">{{data.date}}</span></div><!--  日期选择器2  --><div style="margin: 30px;"><el-date-pickerv-model="data.date02"type="date"format="YYYY/MM/DD"value-format="YYYY-MM-DD"placeholder="请选择一个日期"/> <span style="margin-left: 10px">{{data.date02}}</span></div>

import {reactive} from "vue";//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],date:'',date02:'',
})

页面渲染效果。

所以实际开发时，通常会同时使用format、value-format两个属性。

<4>日期范围选择器。

代码示例。

<el-date-picker style="margin-left: 20px"v-model="data.dateRange"type="daterange"format="YYYY-MM-DD"value-format="YYYY-MM-DD"range-separator="至"start-placeholder="开始时间"end-placeholder="结束时间"/><span style="margin-left: 10px">{{data.dateRange}}</span>

import {reactive} from "vue";//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],date:'',date02:'',dateAndTime:'',time:'',dateRange:null,})

页面渲染效果。

显示的是一个数组。其中有两个值。

（?xxx?xxx:xxx）安全属性访问机制。
修改"{{}}"绑定值格式。(更可靠、绑定的数据的拿取更方便)

<el-date-picker style="margin-left: 20px"v-model="data.dateRange"type="daterange"format="YYYY-MM-DD"value-format="YYYY-MM-DD"range-separator="至"start-placeholder="开始时间"end-placeholder="结束时间"/><span style="margin-left: 10px">{{data.dateRange?.length?data.dateRange[0]:''}} {{data.dateRange?.length?data.dateRange[1]:''}}</span>

页面渲染效果。

（3）DateTimePicker。(日期时间选择控制器)

官方文档。

<1>核心标签。

<el-date-picker>。

<2>代码示例。

<div style="margin: 30px"><el-date-pickerv-model="data.dateAndTime"type="datetime"clearableformat="YYYY-MM-DD"value-format="YYYY-MM-DD"placeholder="请选择日期与时间"/> <span style="margin-left: 10px">{{data.dateAndTime}}</span>
</div>

import {reactive} from "vue";//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],date:'',date02:'',dateAndTime:'',
})

页面渲染效果。

<3>日期、时间格式。(YYYY-MM-DD、HH:mm:ss)

代码示例。

<div style="margin: 30px"><el-date-pickerv-model="data.dateAndTime"type="datetime"format="YYYY-MM-DD HH:mm:ss"value-format="YYYY-MM-DD HH:mm:ss"placeholder="请选择日期与时间"/> <span style="margin-left: 10px">{{data.dateAndTime}}</span>
</div>

import {reactive} from "vue";//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],date:'',date02:'',dateAndTime:'',
})

页面渲染效果。

成功修改：输入框显示格式与绑定值格式。

（4）TimePicker。(时间选择器)

官方文档。

<1>核心标签。

<el-time-picker>。
属性arrow-control。表示使用箭头进行时间选择。(可查阅官方文档)

<2>代码示例。
<el-time-picker style="margin-left: 20px"v-model="data.time"arrow-controlplaceholder="请选择时间"/> <span style="margin-left: 10px">{{data.time}}</span>
import {reactive} from "vue";//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],date:'',date02:'',dateAndTime:'',time:'',
})
页面渲染效果。

<3>时间格式。

代码示例。
<el-time-picker style="margin-left: 20px"v-model="data.time"arrow-controlformat="HH:mm:ss"value-format="HH:mm:ss"placeholder="请选择时间"/> <span style="margin-left: 10px">{{data.time}}</span>
页面渲染效果。

（5）Table。(表格)

官方文档。

<1>基本使用。

核心标签。<el-table>。<el-table-column>。

代码示例。(使用"测试"数据演示)

<div style="margin: 30px"><el-table :data="data.tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="名字" width="180" /><el-table-column prop="address" label="地址" width="180" /></el-table>
</div>

import {reactive} from "vue";//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],date:'',date02:'',dateAndTime:'',time:'',dateRange:null,tableData:[{date:'2025-3-11',name:'岁岁岁平安',address:'北京大兴' },{date:'2025-5-11',name:'张三',address:'湖南常德' },{date:'2025-1-11',name:'李四',address:'上海浦东' },],
})

页面渲染效果。

<2>斑马纹(stripe)表格。

官方文档。

代码示例。(使用"测试"数据演示)

<div style="margin: 30px"><el-table :data="data.tableData" stripe  style="width: 100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="名字" width="180" /><el-table-column prop="address" label="地址" width="180" /></el-table>
</div>

import {reactive} from "vue";//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],date:'',date02:'',dateAndTime:'',time:'',dateRange:null,tableData:[{date:'2025-3-11',name:'岁岁岁平安',address:'北京大兴' },{date:'2025-5-11',name:'张三',address:'湖南常德' },{date:'2025-1-11',name:'李四',address:'上海浦东' },{date:'2025-3-11',name:'小鲁班',address:'北京大兴' },{date:'2025-5-11',name:'小妲己',address:'湖南常德' },{date:'2025-1-11',name:'小洪',address:'上海浦东' },],
})

页面渲染效果。

<3>边框(border)表格。

官方文档。

代码示例。

<div style="margin: 30px"><el-table :data="data.tableData" border stripe style="width:100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="名字" width="180" /><el-table-column prop="address" label="地址" /></el-table>
</div>

页面渲染效果。(注：无边框与有边框各有各的好看或喜好)

<4>Pagination。(分页-表格)

官方文档。
核心标签：<el-pagination>。

核心分页样式。

<!--  官方示例代码  -->
<el-paginationv-model:current-page="currentPage4"v-model:page-size="pageSize4":page-sizes="[100, 200, 300, 400]":size="size":disabled="disabled":background="background"layout="total, sizes, prev, pager, next, jumper":total="400"@size-change="handleSizeChange"@current-change="handleCurrentChange"
/>

核心属性介绍。
v-model:current-page="xxx"。设置默认当前页码。
v-model:page-size="xxx"。设置当前页面展示的数据条数。
:page-sizes="[xxx, xxx, xxx, xxx]"。设置每页数据展示条数的范围选择。
:size="xxx"。调整分页器大小。
:background="xxx"。背景颜色。
layout="total, sizes, prev, pager, next, jumper"。代表整个分页器的布局。(不能少)
:total="xxx"。数据总条数。
@size-change="xxx"。每页显示个数切换时触发。(后面有后端会实现)
@current-change="xxx"。当前页码发生改变时触发。(后面有后端会实现)

代码示例。

<div style="margin: 50px"><el-table :data="data.tableData" border stripe style="width:100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="名字" width="180" /><el-table-column prop="address" label="地址" /></el-table><div style="padding: 10px 0"><el-paginationv-model:current-page="data.currentPage"v-model:page-size="data.pageSize":page-sizes="[5, 10, 15, 20]":disabled="disabled":background="background"layout="total, sizes, prev, pager, next, jumper":total="data.tableData.length"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div>
</div>

import {reactive} from "vue";//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],date:'',date02:'',dateAndTime:'',time:'',dateRange:null,currentPage:1,pageSize:5,tableData:[{date:'2025-3-11',name:'岁岁岁平安',address:'北京大兴' },{date:'2025-5-11',name:'张三',address:'湖南常德' },{date:'2025-1-11',name:'李四',address:'上海浦东' },{date:'2025-3-11',name:'小鲁班',address:'北京大兴' },{date:'2025-5-11',name:'小妲己',address:'湖南常德' },{date:'2025-1-11',name:'小洪',address:'上海浦东' },{date:'2025-3-11',name:'小鲁班',address:'北京大兴' },{date:'2025-5-11',name:'小妲己',address:'湖南常德' },{date:'2025-1-11',name:'小洪',address:'上海浦东' },],
})

页码效果渲染。

假分页处理。(为了显示渲染效果)

<div style="margin: 50px"><el-table :data="data.tableData" border stripe style="width:100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="名字" width="180" /><el-table-column prop="address" label="地址" /></el-table><div style="padding: 10px 0"><el-paginationv-model:current-page="data.currentPage"v-model:page-size="data.pageSize":page-sizes="[5, 10, 15, 20]"layout="total, sizes, prev, pager, next, jumper":total="40"/></div>
</div>

import {reactive} from "vue";//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],date:'',date02:'',dateAndTime:'',time:'',dateRange:null,currentPage:1,pageSize:5,tableData:[{date:'2025-3-11',name:'岁岁岁平安',address:'北京大兴' },{date:'2025-5-11',name:'张三',address:'湖南常德' },{date:'2025-1-11',name:'李四',address:'上海浦东' },{date:'2025-3-11',name:'小鲁班',address:'北京大兴' },{date:'2025-5-11',name:'小妲己',address:'湖南常德' },{date:'2025-1-11',name:'小洪',address:'上海浦东' },{date:'2025-3-11',name:'小鲁班',address:'北京大兴' },{date:'2025-5-11',name:'小妲己',address:'湖南常德' },{date:'2025-1-11',name:'小洪',address:'上海浦东' },{date:'2025-1-11',name:'小洪',address:'上海浦东' },{date:'2025-3-11',name:'小鲁班',address:'北京大兴' },{date:'2025-5-11',name:'小妲己',address:'湖南常德' },{date:'2025-1-11',name:'小洪',address:'上海浦东' },],
})
//假数据处理
data.tableData = data.tableData.splice(0,5);

插槽(scope)。(表格操作栏)(重点)

通过"scope"可以拿到当前数据的行对象。

<template #default="scope"></template>

代码示例。

<div style="margin: 50px"><el-table :data="data.tableData" border stripe style="width:100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="名字" width="180" /><el-table-column prop="address" label="地址" /><el-table-column><template #default="scope">{{scope.row}}</template></el-table-column></el-table><div style="padding: 10px 0"><el-paginationv-model:current-page="data.currentPage"v-model:page-size="data.pageSize":page-sizes="[5, 10, 15, 20]"layout="total, sizes, prev, pager, next, jumper":total="40"/></div>
</div>

页码渲染效果。
以文本的形式（JSON数据）展示当前行对象。

通过scope.row可以拿到行对象的属性。(如：id)
通常操作栏"删除"时，都是根据id删除。就是通过这样拿到当前操作行的数据的id属性然后将其传给后台进行数据的操作。

<el-table-column><template #default="scope">{{scope.row.id}}</template>
</el-table-column>

代码示例。
为了更好的操作：新增"删除"按钮。

<div style="margin: 50px"><el-table :data="data.tableData" border stripe style="width:100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="名字" width="180" /><el-table-column prop="address" label="地址" /><el-table-column label="操作"><template #default="scope"><el-button type="danger" v-on:click="del(scope.row.id)">删除</el-button></template></el-table-column></el-table><div style="padding: 10px 0"><el-paginationv-model:current-page="data.currentPage"v-model:page-size="data.pageSize":page-sizes="[5, 10, 15, 20]"layout="total, sizes, prev, pager, next, jumper":total="40"/></div>
</div>

import {reactive} from "vue";//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],date:'',date02:'',dateAndTime:'',time:'',dateRange:null,currentPage:1,pageSize:5,tableData:[{ id:1, date:'2025-3-11',name:'岁岁岁平安',address:'北京大兴' },{ id:2, date:'2025-5-11',name:'张三',address:'湖南常德' },{ id:3, date:'2025-1-11',name:'李四',address:'上海浦东' },{ id:4, date:'2025-3-11',name:'小鲁班',address:'北京大兴' },],
})
//假数据处理
data.tableData = data.tableData.splice(0,5);//根据id删除
const del = (id) =>{alert('id为'+id+'用户正在被执行删除操作！')
}

页码渲染效果。

使用"删除"图标。
代码示例。

<template #default="scope"><el-button type="danger" circle v-on:click="del(scope.row.id)"><el-icon><Delete /></el-icon></el-button>
</template>

import {Delete} from "@element-plus/icons-vue";

<5>Dialog。(对话框/弹窗)

官方文档。
核心标签：<el-dialog>。

通常在表格的操作栏中的"编辑"操作——页面弹窗再进行相关数据的"编辑"操作。
注意：弹窗的定义（代码）建议定义（写）在最下方。
代码示例。

<div style="margin: 50px"><el-table :data="data.tableData" border stripe style="width:100%"><el-table-column prop="date" label="日期" width="180" /><el-table-column prop="name" label="名字" width="180" /><el-table-column prop="address" label="地址" /><el-table-column label="操作"><template #default="scope"><el-button type="primary" circle v-on:click="edit(scope.row)"><el-icon><Edit /></el-icon></el-button><el-button type="danger" circle v-on:click="del(scope.row.id)"><el-icon><Delete /></el-icon></el-button></template></el-table-column></el-table><div style="padding: 10px 0"><el-paginationv-model:current-page="data.currentPage"v-model:page-size="data.pageSize":page-sizes="[5, 10, 15, 20]"layout="total, sizes, prev, pager, next, jumper":total="40"/></div>
</div>
<!--  设置弹窗默认显示为false  -->
<!--  dialogTableVisible控制弹窗显示  --><el-dialog v-model="data.dialogTableVisible" title="编辑行对象的数据" width="800"><div style="padding: 10px 0"><div style="margin: 10px">日期：{{data.row.date}}</div><div style="margin: 10px">名称：{{data.row.name}}</div><div style="margin: 10px">地址：{{data.row.address}}</div></div></el-dialog>

import {reactive} from "vue";
import {Delete, Edit} from "@element-plus/icons-vue";//定义数据的常用方式
const data = reactive({images:[lun1,lun2,lun3],date:'',date02:'',dateAndTime:'',time:'',dateRange:null,currentPage:1,pageSize:5,tableData:[{ id:1, date:'2025-3-11',name:'岁岁岁平安',address:'北京大兴' },{ id:2, date:'2025-5-11',name:'张三',address:'湖南常德' },{ id:3, date:'2025-1-11',name:'李四',address:'上海浦东' },{ id:4, date:'2025-3-11',name:'小鲁班',address:'北京大兴' },],dialogTableVisible:false,row:null,
})
//假数据处理
data.tableData = data.tableData.splice(0,5);//根据id删除
const del = (id) =>{alert('id为'+id+'用户正在被执行删除操作！')
}//编辑行对象
const edit = (row) =>{data.dialogTableVisible = truedata.row=row
}