技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

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

 收录于 Vue Ui
   约 7000 字   预计阅读 14 分钟 
https://bing.ee123.net/img/rand?artid=146170059

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

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

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

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

（1）el-carousel。(走马灯/轮播图)
  • 官方文档。

https://i-blog.csdnimg.cn/direct/cf16ef5b1a3d41e3a7bc79ab90ea297f.png

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

https://i-blog.csdnimg.cn/direct/cacd4c80f87f403f98bb9e93546e5a84.png

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

https://i-blog.csdnimg.cn/direct/c4d3583c583d4f2486d14fb76befd88c.png

<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>
  • 页面渲染效果。

https://i-blog.csdnimg.cn/direct/7f788a29eff7483a983659c50135f595.png

（2）DatePicker。(日期选择器)
  • 官方文档。

https://i-blog.csdnimg.cn/direct/bea8d1f14dd74d9b818b4e7319cb7541.png

<1>核心标签。
  • 。
<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:'',
})
  • 页面渲染效果。

https://i-blog.csdnimg.cn/direct/7800bd020a39435e8a8219b0496838c7.png

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

https://i-blog.csdnimg.cn/direct/ef2175f8247f4a62af01e8b715a41532.png

<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:'',
})
  • 页面渲染效果。

https://i-blog.csdnimg.cn/direct/f7180779afa94ed5bb5ab180fc2c102e.png

  • 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:'',
})
  • 页面渲染效果。

https://i-blog.csdnimg.cn/direct/024742ff7cae4dce8919cc2075cc4b60.png

  • 所以实际开发时，通常会同时使用 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,

})
  • 页面渲染效果。

https://i-blog.csdnimg.cn/direct/9ce2c7d2cff7441892cd2ed2822d9360.png

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

https://i-blog.csdnimg.cn/direct/0f6374cac6ff4b6785254769a3edab61.png

  • （ ? 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>
  • 页面渲染效果。

https://i-blog.csdnimg.cn/direct/80c7b8e9c5ce4fa294c2bb551ddf890d.png

（3）DateTimePicker。(日期时间选择控制器)
  • 官方文档。

https://i-blog.csdnimg.cn/direct/f78debc9d31e4f66bfaf3ed7ce5d2ba0.png

<1>核心标签。
  • 。
<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:'',
})
  • 页面渲染效果。

https://i-blog.csdnimg.cn/direct/a243886bb0384c57bfa5a5b33b1f18f4.png

https://i-blog.csdnimg.cn/direct/ab5384066414406fa3d868b7df4a9d9f.png

<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:'',
})
  • 页面渲染效果。

https://i-blog.csdnimg.cn/direct/cf4b26967cc8442fbdea50ceb7fa7832.png

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

https://i-blog.csdnimg.cn/direct/4bcb533b02e34fa286fb23f95e915926.png

（4）TimePicker。(时间选择器)
  • 官方文档。

https://i-blog.csdnimg.cn/direct/fd3ab050952f47269844936f50395e52.png

<1>核心标签。
  • 。
  • 属性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:'',
})
  • 页面渲染效果。

https://i-blog.csdnimg.cn/direct/b7ad1964aafc4d02bdbe75cae73d9fa6.png

https://i-blog.csdnimg.cn/direct/1d1918efc6a04a1cba822813cb6a5cac.png

https://i-blog.csdnimg.cn/direct/00ee5085b271442b820d07a01dde8ce6.png

<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>
  • 页面渲染效果。

https://i-blog.csdnimg.cn/direct/28bd9f94a28f4a47ba425cc5e078fefa.png

（5）Table。(表格)
  • 官方文档。

https://i-blog.csdnimg.cn/direct/334bf2722adb4325a4c9f5964bb8c495.png

<1>基本使用。
  • 核心标签。 。 。
  • 代码示例。(使用"测试"数据演示)
<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:'上海浦东' },
  ],
})
  • 页面渲染效果。

https://i-blog.csdnimg.cn/direct/85ef93a7d7a44d279dc92a838b7388d8.png

<2>斑马纹(stripe)表格。
  • 官方文档。

https://i-blog.csdnimg.cn/direct/d7a4798e601247679d4af08e8baedb69.png

  • 代码示例。(使用"测试"数据演示)
<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:'上海浦东' },
  ],
})
  • 页面渲染效果。

https://i-blog.csdnimg.cn/direct/3592e7763c13443a8d432c308388e60d.png

<3>边框(border)表格。
  • 官方文档。

https://i-blog.csdnimg.cn/direct/52a50e275bb647b6a9c5564cf58a6f45.png

  • 代码示例。
<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>
  • 页面渲染效果。(注：无边框与有边框各有各的好看或喜好)

https://i-blog.csdnimg.cn/direct/850cfd8dcb3348459e13039f5aba00ad.png

<4>Pagination。(分页-表格)
  • 官方文档。
  • 核心标签： 。

https://i-blog.csdnimg.cn/direct/1bdfd4fba6ff4fa6905b5dee7466f840.png

  • 核心分页样式。

https://i-blog.csdnimg.cn/direct/4445365654ee40d0854fec1c8c7ead67.png

<!--  官方示例代码  -->
<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:'上海浦东' },
  ],
})
  • 页码效果渲染。

https://i-blog.csdnimg.cn/direct/c9224b0e062949d9b6e012faca450d52.png

  • 假分页处理。(为了显示渲染效果)
<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);

https://i-blog.csdnimg.cn/direct/0fba0137e4e44bf790a3108b4b723aaa.png

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

https://i-blog.csdnimg.cn/direct/1eb16ae3db514b4cbf4d7e35d89d2e50.png

  • 通过"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数据）展示当前行对象。

https://i-blog.csdnimg.cn/direct/c2f72f13eb8d46fb9ad74e88c4fb614d.png

  • 通过scope.row可以拿到行对象的属性。(如：id)
  • 通常操作栏"删除"时，都是根据id删除。就是通过这样拿到当前操作行的数据的id属性然后将其传给后台进行数据的操作。
<el-table-column>
          <template #default="scope">
            {{scope.row.id}}
          </template>
</el-table-column>

https://i-blog.csdnimg.cn/direct/3a4c79ce22cc4c2f841cca4e35410c4c.png

  • 代码示例。
  • 为了更好的操作：新增"删除"按钮。
<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+'用户正在被执行删除操作！')
}
  • 页码渲染效果。

https://i-blog.csdnimg.cn/direct/a8434d50cd5f4a3b9227ee2dd1dcf233.png

  • 使用"删除"图标。
  • 代码示例。
<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";

https://i-blog.csdnimg.cn/direct/eccc82b112694c4d913d169262b923b4.png

<5>Dialog。(对话框/弹窗)
  • 官方文档。
  • 核心标签： 。

https://i-blog.csdnimg.cn/direct/d0a4b87e89754b6ba940b74a6cd673e4.png

  • 通常在表格的操作栏中的"编辑"操作——页面弹窗再进行相关数据的"编辑"操作。
  • 注意：弹窗的定义（代码）建议定义（写）在最下方 。
  • 代码示例。
<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
}
  • 页面渲染效果图。

https://i-blog.csdnimg.cn/direct/32d161ce7ef44cd5a0e6765856a4ea62.png

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

https://i-blog.csdnimg.cn/direct/87df08933b324e99884b99198615b564.png

更新于 2025-03-11
 前端框架, 前端, Vue, Vue, Plus, Elementui
返回 | 主页