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-table>
  </div>
</template>

2. 样式设计（可选）
   为了使界面更加美观，可以在组件中添加一些简单的样式。在 CustomTable.vue 文件中添加

<style scoped>
.custom-table-container {
  padding: 20px;
}
</style>

四、数据绑定与逻辑处理

在 Vue 中，数据绑定是实现动态交互的核心机制。我们需要通过 v-model 将 Input 组件的值与组件内部的数据绑定，并在数据变化时更新表格数据。

1. 数据定义
   在 CustomTable.vue 的

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '张三',
          age: 20,
          address: '北京市朝阳区',
        },
        {
          id: 2,
          name: '李四',
          age: 25,
          address: '上海市浦东新区',
        },
        {
          id: 3,
          name: '王五',
          age: 30,
          address: '广州市天河区',
        },
        // 更多数据...
      ],
    };
  },
  methods: {
    handleSave(row) {
      console.log('保存数据:', row);
      // 这里可以调用 API 保存数据
    },
    handleDelete(row) {
      console.log('删除数据:', row);
      // 这里可以调用 API 删除数据
      this.tableData = this.tableData.filter((item) => item.id !== row.id);
    },
  },
};
</script>

五、完整代码实现

以下是 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-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '张三',
          age: 20,
          address: '北京市朝阳区',
        },
        {
          id: 2,
          name: '李四',
          age: 25,
          address: '上海市浦东新区',
        },
        {
          id: 3,
          name: '王五',
          age: 30,
          address: '广州市天河区',
        },
        // 更多数据...
      ],
    };
  },
  methods: {
    handleSave(row) {
      console.log('保存数据:', row);
      // 这里可以调用 API 保存数据
    },
    handleDelete(row) {
      console.log('删除数据:', row);
      // 这里可以调用 API 删除数据
      this.tableData = this.tableData.filter((item) => item.id !== row.id);
    },
  },
};
</script>

<style scoped>
.custom-table-container {
  padding: 20px;
}
</style>

六、运行与测试

完成代码后，运行项目以测试功能是否正常：

npm run serve

在浏览器中访问项目地址（通常是 http://localhost:8080），你应该能看到一个包含多个 Input 组件和 Button 组件的表格。你可以编辑 Input 组件中的内容，并点击 Button 组件触发保存和删除操作。

七、扩展功能

1. 添加新行
   你可能需要一个功能来添加新行到表格中。我们可以在组件中添加一个按钮来实现这一点：

<template>
  <div class="custom-table-container">
    <!-- 添加新行按钮 -->
    <el-button type="success" @click="handleAdd">添加新行</el-button>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <!-- 列定义 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 初始数据
      ],
    };
  },
  methods: {
    handleAdd() {
      const newId = this.tableData.length + 1;
      this.tableData.push({
        id: newId,
        name: '',
        age: '',
        address: '',
      });
    },
    // 其他方法
  },
};
</script>

2. 表单验证
   在实际应用中，你可能需要对输入数据进行验证。可以使用 Vue 的 v-model 和 v-if 指令来实现简单的验证逻辑：

<template>
  <div class="custom-table-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="名称">
        <template #default="scope">
          <el-input
            v-model="scope.row.name"
            placeholder="请输入名称"
            :class="{ 'is-invalid': !scope.row.name }"
          ></el-input>
          <div v-if="!scope.row.name" class="error-message">名称不能为空</div>
        </template>
      </el-table-column>
      <!-- 其他列 -->
    </el-table>
  </div>
</template>

3. 动态列
   你可能需要根据某些条件动态显示或隐藏列。可以通过 v-if 指令实现：

<template>
  <div class="custom-table-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="名称" v-if="showNameColumn">
        <template #default="scope">
          <el-input v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <!-- 其他列 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 数据
      ],
      showNameColumn: true, // 控制列的显示
    };
  },
};
</script>

4. 行编辑状态
   你可能希望在点击某个按钮时进入行编辑状态，而不是直接在表格中编辑。可以通过一个布尔值来控制编辑状态：

<template>
  <div class="custom-table-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="名称">
        <template #default="scope">
          <div v-if="!scope.row.isEditing">{{ scope.row.name }}</div>
          <el-input
            v-else
            v-model="scope.row.name"
            placeholder="请输入名称"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button v-if="!scope.row.isEditing" @click="editRow(scope.row)">编辑</el-button>
          <el-button v-else @click="saveRow(scope.row)">保存</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '张三',
          age: 20,
          address: '北京市朝阳区',
          isEditing: false,
        },
        // 更多数据
      ],
    };
  },
  methods: {
    editRow(row) {
      row.isEditing = true;
    },
    saveRow(row) {
      row.isEditing = false;
      console.log('保存数据:', row);
    },
  },
};
</script>

八、总结

通过上述代码和扩展功能，我们实现了一个功能丰富的表格组件，其中包含了多个 Input 组件和 Button 组件，并通过模板（template）实现了自定义列内容。你可以根据实际需求进一步扩展和优化这个组件，例如添加更复杂的表单验证、与后端 API 的交互、动态列显示等。