助你一臂之力：Vue 轻松实现 Element-table 动态删除行操作！

2023-10-12 19:40:34

在 Vue.js 中使用 Element-table 实现动态删除行

概述

在数据密集型应用程序中，操作表格是至关重要的。Element-table 是 Vue.js 中一款流行的表格组件，它提供了丰富的功能和易于使用的 API。本文将指导你如何使用 Element-table 实现动态删除行操作，让你的表格更加交互。

导入 Element-table

首先，你需要在项目中安装 element-ui 包：

npm install element-ui

安装完成后，导入 Element-table 组件：

import { ElTable, ElTableColumn } from 'element-ui';

Vue.use(ElTable);
Vue.use(ElTableColumn);

设置数据和方法

在 Vue.js 组件中，定义一个 data 对象来存储表格数据，以及一个 methods 对象来处理删除行操作：

data() {
  return {
    tableData: [
      {
        id: 1,
        name: 'John Doe',
        age: 30,
        address: '123 Main Street'
      },
      {
        id: 2,
        name: 'Jane Doe',
        age: 25,
        address: '456 Elm Street'
      },
      {
        id: 3,
        name: 'Peter Smith',
        age: 40,
        address: '789 Oak Street'
      }
    ]
  };
},
methods: {
  deleteRow(index) {
    this.tableData.splice(index, 1);
  }
}

渲染表格

在 Vue.js 模板中，使用 el-table 组件渲染表格，并使用 el-table-column 定义列：

<el-table :data="tableData">
  <el-table-column prop="id" label="ID"></el-table-column>
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
  <el-table-column prop="address" label="Address"></el-table-column>
  <el-table-column label="Action">
    <template slot-scope="scope">
      <button @click="deleteRow(scope.$index)">Delete</button>
    </template>
  </el-table-column>
</el-table>

响应用户输入

当用户点击删除按钮时，deleteRow 方法将被调用，它将从 tableData 数组中删除指定索引的行，从而从表格中删除该行。

示例代码

以下是完整的代码示例：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
      <el-table-column label="Action">
        <template slot-scope="scope">
          <button @click="deleteRow(scope.$index)">Delete</button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui';

Vue.use(ElTable);
Vue.use(ElTableColumn);

export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: 'John Doe',
          age: 30,
          address: '123 Main Street'
        },
        {
          id: 2,
          name: 'Jane Doe',
          age: 25,
          address: '456 Elm Street'
        },
        {
          id: 3,
          name: 'Peter Smith',
          age: 40,
          address: '789 Oak Street'
        }
      ]
    };
  },
  methods: {
    deleteRow(index) {
      this.tableData.splice(index, 1);
    }
  }
};
</script>