程序员必备知识：Vue+Element 实现表格增加、删除行

2024-02-05 23:29:48

Vue 和 Element 是两个非常强大的 JavaScript 框架。Vue 是一个用于构建用户界面的渐进式框架，而 Element 是一个用于构建组件库的框架。这两个框架可以很好地一起使用，来创建复杂的交互式 Web 应用程序。

在本篇文章中，我们将使用 Vue 和 Element 来实现一个简单的表格。这个表格可以增加行，也可以根据索引删除行。我们将使用 Vue 来管理表格中的数据，并使用 Element 来构建表格的界面。

首先，我们需要创建一个新的 Vue 项目。我们可以使用以下命令来创建一个新的 Vue 项目：

vue create vue-table

创建一个新的 Vue 项目后，我们需要安装 Element。我们可以使用以下命令来安装 Element：

npm install element-ui

安装 Element 后，我们需要在我们的 Vue 项目中导入它。我们可以将以下代码添加到我们的 main.js 文件中：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

导入 Element 后，我们需要创建一个新的 Vue 组件。我们可以使用以下命令来创建一个新的 Vue 组件：

vue create table.vue

在我们的 table.vue 文件中，我们需要添加以下代码：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="handleAdd">增加行</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区'
        },
        {
          name: '李四',
          age: 25,
          address: '上海市浦东区'
        },
        {
          name: '王五',
          age: 30,
          address: '广州市天河区'
        }
      ]
    }
  },
  methods: {
    handleAdd() {
      this.tableData.push({
        name: '',
        age: 0,
        address: ''
      })
    },
    handleDelete(index) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>

在我们的 table.vue 文件中，我们首先定义了一个 <el-table> 组件。这个组件用于显示表格的数据。然后，我们定义了三个 <el-table-column> 组件。这些组件用于显示表格中的数据列。其中，第一个组件用于显示姓名，第二个组件用于显示年龄，第三个组件用于显示地址。最后一个组件用于显示操作按钮。

在我们的 <el-table-column> 组件中，我们使用了 prop 属性来指定要显示的数据列。我们还使用了 label 属性来指定列的标题。在最后一个组件中，我们使用了 slot-scope 属性来定义一个作用域。在这个作用域中，我们可以访问当前行的索引。然后，我们使用 @click 事件来调用 handleDelete() 方法。

在我们的 table.vue 文件中，我们还定义了两个方法：handleAdd() 和 handleDelete()。handleAdd() 方法用于增加一行，而 handleDelete() 方法用于根据索引删除一行。

现在，我们需要将我们的 table.vue 组件添加到我们的 Vue 项目中。我们可以将以下代码添加到我们的 App.vue 文件中：

<template>
  <div id="app">
    <table></table>
  </div>
</template>

<script>
import table from './table.vue'

export default {
  components: {
    table
  }
}
</script>