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

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';
  
  // 优化后的tableData
  const 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.kler.cn/a/296945.html

相关文章:

  • 深度学习中常见的损失函数
  • golang学习笔记03——gin框架的核心数据结构
  • 计算机毕业设计Python+Tensorflow股票推荐系统 股票预测系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI
  • 前端框架有哪些 如何选择和优缺点
  • JVM面试真题总结(三)
  • Adobe Sensei——自动化视频编辑、特效应用和素材增强,通过AI技术快速优化视频内容,自动修复视频质量、自动添加背景音乐或字幕
  • Centos7安装FFmpeg详细步骤(已验证成功)
  • 担心违规?害怕封号?数字人直播防封技巧全解析!
  • Swift 创建扩展(Extension)
  • Java语言基础
  • [uniapp/wx小程序] 关于cover-view滚动/点击穿透问题的解决方案/cover-view 的坑
  • FreeRTOS学习笔记(四)Freertos的中断管理及临界保护
  • 浙大数据结构:04-树7 二叉搜索树的操作集
  • 【每日刷题】Day114
  • Git-如何将本地项目推到GitHub
  • 盘点10款顶级加密软件,让企业数据安全得到保障!
  • 20240905软考架构-------软考121-125答案解析
  • 深入理解RxJava:响应式编程的现代方式
  • 路灯集中控制器与智慧照明:塑造未来城市的智能光影
  • 物联网之ESP32控制GPIO输出点亮LED、闪烁LED灯