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

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

article 2025/3/13 2:40:39

目录

一、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">
<!--    图片高度不一致可以通过height设置      -->
          <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-picker
          v-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-picker
          v-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-picker
          v-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-picker
          v-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-picker
          v-model="data.dateAndTime"
          type="datetime"
          clearable
          format="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-picker
          v-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-control
          placeholder="请选择时间"
      /> <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-control
          format="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-pagination
      v-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-pagination
        v-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-pagination
        v-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-pagination
        v-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-pagination
        v-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-pagination
        v-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 = true
  data.row=row
}
  • 页面渲染效果图。

  • 点击编辑按钮，就会将当前行对象的数据传给弹窗绑定的data.row。分别渲染对应值。


http://www.kler.cn/a/582168.html

相关文章：

  • 设计模式之工厂模式：原理、实现与应用
  • 模拟面试题：系统设计
  • Spring（九）AOP-底层原理与通知方法的理解
  • SQL Server 与 MySQL 的库同步工具推荐
  • 《React 属性与状态江湖：从验证到表单受控的实战探险》
  • 【从零开始学习计算机科学】计算机体系结构（二）指令级并行（ILP）
  • 医疗AI测试实战：如何确保人工智能安全赋能医疗行业？
  • 【C#学习笔记01】从程序框架到函数调用
  • 【AI大模型智能应用】Deepseek生成测试用例
  • 2025，以SBOM为基础的云原生应用安全治理
  • Linux学习(十五)(故障排除(ICMP,Ping,Traceroute,网络统计,数据包分析))
  • 不同AI生成的PHP版雪花算法
  • 装饰器模式的C++实现示例
  • 数据分析绘制随时间顺序变化图加入线性趋势线——numpy库的polyfit计算一次多项式拟合
  • 揭开AI-OPS 的神秘面纱 第五讲 AI 模型服务层（开源方向）
  • electron+vue+webview内嵌网页并注入js
  • 【实战ES】实战 Elasticsearch：快速上手与深度实践-6.1.1RBAC角色权限设计
  • 【Linux跬步积累】—— 网络基础
  • Windows系统编程项目（四）窗口管理器
  • 关于Go中使用goroutine协程实现的算法