Vue3中使用Element Plus实现可编辑表格

在现代Web开发中，使用Vue.js构建的交互式表格是非常常见的需求之一。特别是在涉及到数据管理的应用场景中，能够直接在表格内进行编辑、添加和删除的操作极大地提升了用户体验。本文将介绍如何利用Vue3结合Element Plus来实现一个基本的可编辑表格。

准备工作

首先，确保您的项目已经初始化好Vue3环境，并且安装了Element Plus。如果还没有安装Element Plus，可以通过npm或yarn来进行安装：

npm install element-plus
# 或者
yarn add element-plus

实现效果

代码实现

模板部分

在<template>标签内定义了一个包含按钮和表格的基本结构。表格中有几个关键的部分需要注意：

• el-button用于触发添加新行的行为。
• el-table用来展示数据，通过:data属性绑定数据源。
• el-table-column定义了表格的列，其中type="index"用于显示行号。
• 表格单元格内的<template>标签允许我们在不同的编辑状态下切换显示的内容。

<template>
    <div>
      <div class="add-btn">
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </div>
      <el-table
        :data="tableData"
      >
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="Date">
          <template #default="scope">
            <span v-show="!scope.row.isEdit">
              {{ scope.row.date }}
            </span>
            <el-input
              v-show="scope.row.isEdit"
              v-model="scope.row.date"
            />
          </template>
        </el-table-column>
        <el-table-column label="Name">
          <template #default="scope">
            <span v-show="!scope.row.isEdit">
              {{ scope.row.name }}
            </span>
            <el-input
              v-show="scope.row.isEdit"
              v-model="scope.row.name"
              placeholder="请输入姓名"
            />
          </template>
        </el-table-column>
        <el-table-column label="Age">
          <template #default="scope">
            <span v-show="!scope.row.isEdit">{{
              scope.row.age
            }}</span>
            <el-select
              v-show="scope.row.isEdit"
              v-model="scope.row.age"
              placeholder="请选择年龄"
            >
              <el-option
                v-for="item in ageList"
                :key="item.id"
                :label="item.name"
                :value="item"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="Sex">
          <template #default="scope">
            <span v-show="!scope.row.isEdit">{{
              scope.row.sex == 1 ? "男" : "女"
            }}</span>
            <el-radio-group
              v-show="scope.row.isEdit"
              v-model="scope.row.showPoint"
            >
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" align="center">
          <template #default="scope">
            <el-button
              v-if="scope.row.isEdit"
              type="text"
              @click="handleSave(scope.row)"
            >
              保存
            </el-button>
            <el-button
              v-else
              type="text"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              @click="handleDelete(group, scope.$index)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>

逻辑处理

接下来，在<script setup>中定义了数据和方法。这里使用了Vue3的Composition API来组织代码：

• tableData是一个响应式的数组，存储表格的数据。
• handleAdd函数负责向tableData添加新的项。
• handleEdit和handleSave分别处理行进入编辑模式和退出编辑模式。
• handleDelete用于从tableData中移除指定的行。

  <script setup>
    import { ref } from 'vue'
    let tableData = ref([])
    function handleAdd() {
      tableData.value.push({
        date: '',
        name: '',
        age: '',
        sex: null,
        isEdit: true
      })
    }
    function handleEdit(row) {
      row.isEdit = true
    }
    function handleDelete(index) {
      tableData.value.splice(index, 1)
    }
    function handleSave(row) {
      row.isEdit = false
    }
    </script>

  结论

  通过以上步骤，我们成功地创建了一个支持基本CRUD操作的Vue3表格。这样的表格不仅提高了应用程序的功能性，也使得最终用户能更加方便地管理和操作数据。希望这篇教程对您有所帮助！