Vue经典案例：Elementsplus中的table组件在列中使用模板template

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[15045666310@163.com]
📱个人微信：15045666310
🌐网站：https://meihua150.cn/
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

---

一、引言

Elements Plus 是一个基于 Vue 3 的 UI 组件库，提供了丰富的组件来构建美观且功能强大的界面。其中，Table 组件用于展示数据，而模板（template）功能允许我们在表格列中自定义内容，包括 Input 组件和 Button 组件。这种自定义功能非常强大，可以实现复杂的交互逻辑，如编辑表格数据、触发操作等。

二、项目搭建与依赖安装

在开始之前，我们需要搭建一个基于 Vue 3 和 Elements Plus 的项目环境。

1. 安装 Vue CLI
   如果你还没有安装 Vue CLI，可以通过以下命令进行安装：

npm install -g @vue/cli

2. 创建项目
   使用 Vue CLI 创建一个新的 Vue 3 项目：

vue create elements-plus-table-demo

在创建过程中，选择 Vue 3 作为项目版本。
3. 安装 Elements Plus
在项目目录下运行以下命令安装 Elements Plus：

npm install elements-plus

4. 配置 Elements Plus
   在项目的入口文件（通常是 main.js 或 main.ts）中引入 Elements Plus：

import {
   
    createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'elements-plus';
import 'elements-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

三、模板结构设计

在 Vue 中，模板是组件的核心部分，用于定义组件的 HTML 结构。我们的目标是在 Table 组件的列中使用模板，并在模板中包含多个 Input 组件和 Button 组件。

1. 创建组件模板
   在 src/components 目录下创建一个名为 CustomTable.vue 的文件，用于实现自定义表格的功能。以下是模板的基本结构：

<template>
  <div class="custom-table-container">
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="ID" width="180">
        <template #default="scope">
          {
   
   {
   
    scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="名称">
        <template #default="scope">
          <el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="年龄">
        <template #default="scope">
          <el-input v-model="scope.row.age" placeholder="请输入年龄" type="number"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="地址">
        <template #default="scope">
          <el-input v-model="scope.row.address" placeholder="请输入地址"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="primary" @click="handleSave(scope.row)">保存</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-t