Vue3动态表格快速攻略：轻松打造动态交互表格

前端

2023-10-23 12:19:26

使用 Vue 3 和 Element Plus 构建动态表格

前言

在当今数据驱动的时代，动态表格已成为许多 web 应用程序中不可或缺的组件。它们允许用户查看、编辑和管理数据，同时提供交互性和可定制性。本文将指导您使用 Vue 3 和 Element Plus 构建功能强大的动态表格，让您轻松管理数据。

准备工作

安装 Vue 3 和 Element Plus： 确保已安装 Vue 3 和 Element Plus。
创建 Vue 项目： 使用 Vue CLI 创建一个新的 Vue 项目。

构建表格组件

在 src 目录下创建一个名为 Table.vue 的文件。此文件将包含表格组件的代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" width="80"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="city" label="城市"></el-table-column>
    <el-table-column prop="action" label="操作">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
        <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  setup() {
    const tableData = ref([
      {
        id: 1,
        name: '张三',
        age: 20,
        city: '北京'
      },
      {
        id: 2,
        name: '李四',
        age: 22,
        city: '上海'
      },
      {
        id: 3,
        name: '王五',
        age: 25,
        city: '广州'
      }
    ]);

    const handleEdit = (row) => {
      ElMessage.success('编辑成功！');
    };

    const handleDelete = (row) => {
      ElMessage.success('删除成功！');
    };

    return {
      tableData,
      handleEdit,
      handleDelete
    };
  }
};
</script>

使用表格组件

在 App.vue 中导入并使用表格组件：

<template>
  <Table />
</template>

<script>
import Table from './components/Table.vue';

export default {
  components: {
    Table
  }
};
</script>

添加交互功能

添加输入框和下拉框：

<template>
  ...
  <el-table-column prop="name" label="姓名">
    <template slot-scope="scope">
      <el-input v-model="scope.row.name" @input="handleInput(scope.row)"></el-input>
    </template>
  </el-table-column>
  <el-table-column prop="age" label="年龄">
    <template slot-scope="scope">
      <el-input-number v-model="scope.row.age" @input="handleInput(scope.row)"></el-input-number>
    </template>
  </el-table-column>
  <el-table-column prop="city" label="城市">
    <template slot-scope="scope">
      <el-select v-model="scope.row.city" @change="handleInput(scope.row)">
        <el-option label="北京" value="北京"></el-option>
        <el-option label="上海" value="上海"></el-option>
        <el-option label="广州" value="广州"></el-option>
      </el-select>
    </template>
  </el-table-column>
  ...
</template>

<script>
...
  const handleInput = (row) => {
    ElMessage.success('更新成功！');
  };
...
</script>