Vue 3 + Element Plus 封装单列控制编辑的可编辑表格组件

在Web应用开发中,经常需要提供表格数据的编辑功能。本文将介绍如何使用Vue 3结合Element Plus库来实现一个支持单列控制编辑功能的表格,并通过封装组件的形式提高代码的复用性。通过本教程,你将学会如何构建一个具备单列控制编辑功能的表格组件,并在表单提交时保存更改。

b536e14756a64abeba1a16e60adfcd0f.png

目标

  • 实现一个基本的表格,其中包含日期、名称和描述等列。
  • 表格中的每一项都可以在点击编辑图标后进入编辑模式。
  • 编辑模式下可以修改表格单元格的内容。
  • 编辑完成后,可以通过失去焦点的方式提交更改。
  • 支持单列控制编辑,即可以单独控制每一列表格单元格的编辑状态。
  • 封装成可复用的组件,便于在其他项目中使用。

创建表格组件

我们将创建一个主组件App.vue和一个子组件EditableCell.vue来实现表格的编辑功能。

主组件 App.vue

<template><div class="table-layout"><el-table :data="tableData"><el-table-column type="index" label="序号" width="60" /><el-table-column prop="id" label="ID" width="80" /><el-table-column prop="date" label="日期"><template #default="scope"><EditableCell:cell-data="scope.row.date":is-editing="scope.row.isEditDate":column="scope.column.property":row="scope.row"@toggleEdit="toggleEdit"@applyChanges="applyChanges"/></template></el-table-column><el-table-column prop="name" label="名称"><template #default="scope"><EditableCell:cell-data="scope.row.name":is-editing="scope.row.isEditName":column="scope.column.property":row="scope.row"@toggleEdit="toggleEdit"@applyChanges="applyChanges"/></template></el-table-column><el-table-column prop="description" label="描述"><template #default="scope"><EditableCell:cell-data="scope.row.description":is-editing="scope.row.isEditDescription":column="scope.column.property":row="scope.row"@toggleEdit="toggleEdit"@applyChanges="applyChanges"/></template></el-table-column></el-table></div></template><script setup>import { ref } from 'vue';import EditableCell from './EditableCell.vue'; // 确保路径正确import { ElTable, ElTableColumn, ElInput, ElIcon } from 'element-plus';import { Edit } from '@element-plus/icons-vue';// 优化后的tableDataconst tableData = ref([{id: 1,date: '2024-08-01',name: '项目A',description: '这是一个关于项目A的描述',isEditDate: false,isEditName: false,isEditDescription: false},{id: 2,date: '2024-08-15',name: '项目B',description: '这是一个关于项目B的描述',isEditDate: false,isEditName: false,isEditDescription: false},{id: 3,date: '2024-09-01',name: '项目C',description: '这是一个关于项目C的描述',isEditDate: false,isEditName: false,isEditDescription: false}]);function toggleEdit(column, row) {if (column && row) {const editKey = `isEdit${column.charAt(0).toUpperCase() + column.slice(1)}`;row[editKey] = !row[editKey];}}function applyChanges(newValue, column, row) {if (column && row) {row[column] = newValue;const editKey = `isEdit${column.charAt(0).toUpperCase() + column.slice(1)}`;row[editKey] = false;}}</script><style scoped>.table-layout {width: 60%;margin: 60px auto;}.edit-icon {margin: 10px 0 0 10px;}</style>

子组件 EditableCell.vue

1<template>
2  <div>
3    <span v-if="!isEditing">{{ displayData }}</span>
4    <el-input
5      v-else
6      v-model="displayData"
7      style="width: 120px;"
8      @blur="onBlur"
9    />
10    <el-icon color="#409EFF" class="edit-icon" @click="onToggleEdit">
11      <Edit />
12    </el-icon>
13  </div>
14</template>
15
16<script>
17export default {
18  name: 'EditableCell',
19  props: ['cellData', 'isEditing', 'column', 'row'], // 添加row属性
20  emits: ['toggleEdit', 'applyChanges'],
21  data() {
22    return {
23      displayData: this.cellData
24    };
25  },
26  watch: {
27    cellData(newVal) {
28      this.displayData = newVal;
29    }
30  },
31  methods: {
32    onToggleEdit() {
33      this.$emit('toggleEdit', this.column, this.row); // 传递column和row
34    },
35    onBlur() {
36      this.$emit('applyChanges', this.displayData, this.column, this.row); // 传递column和row
37    }
38  }
39}
40</script>
41
42<style scoped>
43.edit-icon {
44  margin: 10px 0 0 10px;
45}
46</style>

说明

  1. 子组件 (EditableCell.vue):

    • 使用内部状态displayData来存储编辑时的值,并通过watch确保它与cellData同步。
    • 在模板中,根据编辑状态显示不同的内容。
    • onBlur方法中提交更改,并正确调用applyChanges方法。
  2. 父组件 (App.vue):

    • 在模板中,通过scope.column.property获取列的属性名称,并将其传递给子组件。
    • 在模板中,通过scope.row将行数据传递给子组件。
    • toggleEdit方法中,通过构造的editKey来切换编辑状态。
    • applyChanges方法中,通过构造的editKey来更新编辑状态,并保存新值。

通过这种方式,我们实现了表格的编辑功能,并确保了编辑状态下数据的正确提交。

总结

本文介绍了如何使用Vue 3和Element Plus实现一个带有编辑功能的表格。通过本文的步骤,你可以轻松地在自己的项目中实现类似的表格编辑功能。希望这篇教程对你有所帮助!

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/53591.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue2中使用ant-design的tab组件让他一行充满

使用tabs组件默认样式这样 想改成水平居中铺满如下&#xff1a; 需要改下css样式 /deep/ .ant-tabs-nav {width: 100%;& > div {width: 100%;display: flex;align-items: center;}.ant-tabs-tab {flex: 1;text-align: center;}}

为Hexo添加说说功能—Artitalk

文章目录 Artitalk部署LeanCloud配置Hexo Artitalk 基于 LeanCloud 实现的可实时发布说说/微语的 js Artitalk.js官方文档 官方文档其实讲述的很详细了&#xff0c;在此记录一下&#xff0c;方便以后维护。 另外欢迎来我的博客 火柴人儿的小站&#xff0c;本博客基于雨云服务器…

MongoDB延迟查询

在 MongoDB 中&#xff0c;查看副本集成员之间的副本延迟可以通过以下步骤进行&#xff1a; 使用 rs.status() 命令&#xff1a; 这个命令提供了副本集的详细状态信息&#xff0c;包括每个成员的延迟情况。在 MongoDB shell 中&#xff0c;你可以执行以下命令&#xff1a; rs.s…

斯坦福大学论文润色chat-gpt指令

Quick Prompts快速提示 To enhance text clarity-为了增强文本清晰度 As a non-native English speaker, kindly help me revise the following text for improved understand clarity. Please check for spelling and sentence structure errors and suggest alternatives.为…

15.2 JDBC数据库编程2

15.2.1 数据库访问步骤 使用JDBC API连接和访问数据库&#xff0c;一般分为以下5个步骤: (1) 加载驱动程序 (2) 建立连接对象 (3) 创建语句对象 (4) 获得SQL语句的执行结果 (5) 关闭建立的对象&#xff0c;释放资源 下面将详细描述这些步骤 15.2.2 加载驱动程序 要使…

山东省行政执法证照片要求及图像处理方法

在山东省&#xff0c;行政执法证是执法人员身份的重要标识&#xff0c;其照片的规范性对于证件的有效性至关重要。本文将详细介绍山东省行政执法证照片的要求&#xff0c;并提供使用手机相机拍照的实用方法&#xff0c;以确保照片符合标准。 一、山东省行政人员执法证照片拍摄要…

el-table实现当内容过多时,el-table显示滚动条,页面不显示滚动条

估计有不少小伙伴在开发公司的ERP使用el-table都会遇到这么一个问题&#xff0c;就是产品经理提出&#xff0c;页面不出现滚动条&#xff0c;因为不美观。但是当el-table内容过多&#xff0c;超过页面的宽度时候&#xff0c;页面就会有滚动条。那应该如何解决呢?能不能让滚动条…

MySQL 大量 IN 的查询优化

背景 &#xff08;1&#xff09;MySQL 8.0 版本 &#xff08;2&#xff09;业务中遇到大量 IN 的查询&#xff0c;例&#xff1a; SELECT id, username, icon FROM users WHERE id IN (123, 523, 1343, ...);其中 id 为主键&#xff0c;IN 的列表长度有 8000 多个 问题 …

c++开关灯

题目描述 现有 &#x1d45b;n 盏灯排成一排&#xff0c;从左到右依次编号为&#xff1a;11&#xff0c;22&#xff0c;……&#xff0c;&#x1d45b;n。然后依次执行 &#x1d45a;m 项操作。 操作分为两种&#xff1a; 指定一个区间 [&#x1d44e;,&#x1d44f;][a,b]&…

程序员和开发者如何写好一份简历入门

文章目录 引言简历结构 简历模板姓名个人简介教育背景工作经验高级Java开发工程师 | XX科技有限公司Java开发工程师 | YY信息技术有限公司 项目经验项目名称&#xff1a;ZZ在线教育平台 技能荣誉与奖项附加信息 引言 怎么写好一份开发人员简历 简历结构 个人信息&#xff1a;…

使用 `readResolve` 防止序列化破坏单例模式

单例模式是一种设计模式&#xff0c;其目的是确保一个类只有一个实例&#xff0c;并提供一个全局访问点。在 Java 中&#xff0c;我们常常通过私有化构造方法和提供静态访问方法来实现单例。然而&#xff0c;尽管这些手段可以有效防止类的实例化&#xff0c;反射和序列化依然能…

百度静态资源瓦片nginx直接显示完整案例

案例地址&#xff1a;https://download.csdn.net/download/jinhuding/89733763 访问显示效果&#xff1a;(根据瓦片地址直接显示) http://172.16.39.203:8099/tiles/

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站&#xff0c;手机流量可以访问IPV6网络的服务&#xff0c;为什么不在电脑搭建Home Assistant&am…

卷积神经网络综述

摘要 本文对卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;进行了全面综述。首先介绍了卷积神经网络的发展历程&#xff0c;包括早期的理论基础和关键突破。接着详细阐述了卷积神经网络的结构组成&#xff0c;包括卷积层、池化层、全连接层…

使用生成式AI解读人们的真实意图

你可以使用生成式AI来辨别别人所说的话与他们的真实意思&#xff0c;这是一种非常有用的工具&#xff0c;懂得如何明智地使用它非常重要。 你是否曾经怀疑过别人对你说的话是否真正传达了他们的真实意思&#xff1f; 我敢肯定你有过这种经历。 有时候&#xff0c;人们说的一…

ONU测试需要那些协议的学习

在进行ONU&#xff08;Optical Network Unit&#xff0c;光网络单元&#xff09;的相关测试时&#xff0c;需要学习和掌握一系列协议和技术&#xff0c;以确保测试的有效性和准确性。这些协议主要涉及网络传输、设备管理、服务质量&#xff08;QoS&#xff09;等方面。以下是需…

敏捷开发解决的到底是什么问题?

随着信息化社会的快速发展&#xff0c;软件项目的开发方式也面临着不断更新和改进的压力。敏捷开发作为一种新兴的软件开发方法&#xff0c;因其高效、灵活和适应市场需求的能力&#xff0c;逐渐得到了广泛的关注和应用。 一、敏捷开发是什么&#xff1f; 百度百科中是这样解…

视频号黄金时间

现在刷视频的人越来越多&#xff0c;看视频号的也很多&#xff0c;那我们应该怎样发视频号呢&#xff1f;发朋友圈都有黄金时间&#xff0c;那视频号有吗&#xff1f; 答案是&#xff1a;有的。 不同时间段发什么内容的视频&#xff0c;可以引流更多精准的流量&#xff0c;可…

期货量化现在是要比股票量化更适合高频交易,程序化交易

炒股自动化&#xff1a;申请官方API接口&#xff0c;散户也可以 python炒股自动化&#xff08;0&#xff09;&#xff0c;申请券商API接口 python炒股自动化&#xff08;1&#xff09;&#xff0c;量化交易接口区别 Python炒股自动化&#xff08;2&#xff09;&#xff1a;获取…

【JAVA入门】Day34 - Stream流

【JAVA入门】Day34 - Stream流 文章目录 【JAVA入门】Day34 - Stream流一、Stream 流的作用和使用步骤1.Stream流的创建&#xff0c;数据的添加2. Stream流的中间方法3. Stream流的终结方法 Stream 流有什么作用&#xff1f;我们看一个例子&#xff1a; 【练习】需求&#xff…