快捷導(dǎo)航

Vue 3 + Element Plus 封裝單列控制編輯的可編輯表格組件的方法

更新時間：2024年09月11日 11:22:45 作者：前端學(xué)步

在Web應(yīng)用開發(fā)中實現(xiàn)表格數(shù)據(jù)編輯功能至關(guān)重要,本文將詳細(xì)介紹如何使用Vue3和ElementPlus庫來構(gòu)建一個支持單列編輯的表格組件,本教程詳細(xì)闡述了組件創(chuàng)建過程和數(shù)據(jù)綁定機(jī)制,幫助你快速掌握Vue3中表格編輯功能的實現(xiàn),感興趣的朋友一起看看吧

在Web應(yīng)用開發(fā)中，經(jīng)常需要提供表格數(shù)據(jù)的編輯功能。本文將介紹如何使用Vue 3結(jié)合Element Plus庫來實現(xiàn)一個支持單列控制編輯功能的表格，并通過封裝組件的形式提高代碼的復(fù)用性。通過本教程，你將學(xué)會如何構(gòu)建一個具備單列控制編輯功能的表格組件，并在表單提交時保存更改。

目標(biāo)

實現(xiàn)一個基本的表格，其中包含日期、名稱和描述等列。
表格中的每一項都可以在點擊編輯圖標(biāo)后進(jìn)入編輯模式。
編輯模式下可以修改表格單元格的內(nèi)容。
編輯完成后，可以通過失去焦點的方式提交更改。
支持單列控制編輯，即可以單獨控制每一列表格單元格的編輯狀態(tài)。
封裝成可復(fù)用的組件，便于在其他項目中使用。

創(chuàng)建表格組件

我們將創(chuàng)建一個主組件App.vue和一個子組件EditableCell.vue來實現(xiàn)表格的編輯功能。

主組件 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';
  // 優(yōu)化后的tableData
  const tableData = ref([
    {
      id: 1,
      date: '2024-08-01',
      name: '項目A',
      description: '這是一個關(guān)于項目A的描述',
      isEditDate: false,
      isEditName: false,
      isEditDescription: false
    },
    {
      id: 2,
      date: '2024-08-15',
      name: '項目B',
      description: '這是一個關(guān)于項目B的描述',
      isEditDate: false,
      isEditName: false,
      isEditDescription: false
    },
    {
      id: 3,
      date: '2024-09-01',
      name: '項目C',
      description: '這是一個關(guān)于項目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

<template>
  <div>
    <span v-if="!isEditing">{{ displayData }}</span>
    <el-input
      v-else
      v-model="displayData"
      style="width: 120px;"
      @blur="onBlur"
    />
    <el-icon color="#409EFF" class="edit-icon" @click="onToggleEdit">
      <Edit />
    </el-icon>
  </div>
</template>
<script>
export default {
  name: 'EditableCell',
 props: ['cellData', 'isEditing', 'column', 'row'], // 添加row屬性
  emits: ['toggleEdit', 'applyChanges'],
  data() {
    return {
      displayData: this.cellData
    };
  },
  watch: {
    cellData(newVal) {
      this.displayData = newVal;
    }
  },
  methods: {
    onToggleEdit() {
      this.$emit('toggleEdit', this.column, this.row); // 傳遞column和row
    },
    onBlur() {
      this.$emit('applyChanges', this.displayData, this.column, this.row); // 傳遞column和row
    }
  }
}
</script>
<style scoped>
.edit-icon {
  margin: 10px 0 0 10px;
}
</style>

說明

子組件 (EditableCell.vue):

使用內(nèi)部狀態(tài)displayData來存儲編輯時的值，并通過watch確保它與cellData同步。
在模板中，根據(jù)編輯狀態(tài)顯示不同的內(nèi)容。
在onBlur方法中提交更改，并正確調(diào)用applyChanges方法。

父組件 (App.vue):

在模板中，通過scope.column.property獲取列的屬性名稱，并將其傳遞給子組件。
在模板中，通過scope.row將行數(shù)據(jù)傳遞給子組件。
在toggleEdit方法中，通過構(gòu)造的editKey來切換編輯狀態(tài)。
在applyChanges方法中，通過構(gòu)造的editKey來更新編輯狀態(tài)，并保存新值。

通過這種方式，我們實現(xiàn)了表格的編輯功能，并確保了編輯狀態(tài)下數(shù)據(jù)的正確提交。

總結(jié)

本文介紹了如何使用Vue 3和Element Plus實現(xiàn)一個帶有編輯功能的表格。通過本文的步驟，你可以輕松地在自己的項目中實現(xiàn)類似的表格編輯功能。希望這篇教程對你有所幫助！

到此這篇關(guān)于Vue 3 + Element Plus 封裝單列控制編輯的可編輯表格組件的文章就介紹到這了,更多相關(guān)Vue 3 Element Plus 編輯表格組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: