Vue Element UI-Table实现编辑、删除、新增和合计操作

前言

Vue.js是一款流行的前端框架，而Element UI是基于Vue.js的一套组件库，提供了丰富的UI组件，其中包括了Table组件。在实际开发中，Table组件经常用于展示和编辑数据。本文将介绍如何使用Vue和Element UI的Table组件实现编辑当前行、删除当前行、新增行和合计操作。

安装和引入Element UI

首先，我们需要安装Element UI，并将其引入到项目中。可以通过npm或yarn进行安装，具体命令如下：

npm install element-ui --save

或

yarn add element-ui

然后，在main.js文件中引入Element UI：

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

Vue.use(ElementUI)

创建一个包含Table组件的Vue组件

接下来，我们需要创建一个包含Table组件的Vue组件，并在组件中定义数据和方法。在这个示例中，我们将使用一个数组来保存表格数据。

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
        <template slot-scope="props">
          {{ props.row.age }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="props">
          <el-button
            type="primary"
            size="mini"
            @click="editTableRow(props.$index)">
            编辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click="deleteTableRow(props.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      type="primary"
      @click="addTableRow">
      新增
    </el-button>
    <div>
      合计：{{ totalAge }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 }
      ]
    }
  },
  computed: {
    totalAge() {
      return this.tableData.reduce((total, item) => total + item.age, 0)
    }
  },
  methods: {
    editTableRow(index) {
      // 编辑当前行
      // 根据index获取当前行数据，并在编辑完成后更新tableData数组
    },
    deleteTableRow(index) {
      // 删除当前行
      // 根据index从tableData数组中移除当前行数据
    },
    addTableRow() {
      // 新增行
      // 在tableData数组末尾新增一条空数据
    }
  }
}
</script>

在上述代码中，我们使用el-table组件进行表格的展示，并使用el-table-column组件定义表格的列。在操作列中，我们定义了两个按钮用于编辑和删除当前行，并实现了对应的点击事件。

同时，我们使用计算属性totalAge来计算表格中年龄的总和，并在页面中展示出来。

在methods中，定义了三个方法：editTableRow用于编辑当前行，deleteTableRow用于删除当前行，addTableRow用于新增一行。

编辑当前行

在editTableRow方法中，我们可以通过index参数获取当前行在数组中的索引，从而获取到当前行的数据。在编辑完成后，我们可以更新tableData数组中对应索引的数据。

具体的实现代码可以根据实际需求进行编写，比如使用对话框来进行编辑操作，按需求做相应的界面和逻辑设计。

删除当前行

在deleteTableRow方法中，我们可以通过index参数获取当前行在数组中的索引，从而将其从tableData数组中移除。

你可以使用splice方法将当前行数据从数组中删除：

this.tableData.splice(index, 1)

新增行

在addTableRow方法中，我们可以在tableData数组末尾添加一条空数据。这样，当点击新增按钮时，表格就会多出一行空数据。

你可以使用push方法将空数据添加到数组末尾：

this.tableData.push({ name: '', age: null })

合计操作

在上述示例中，我们通过计算属性totalAge来计算年龄的总和，并在页面中进行展示。你可以根据实际需求，在计算属性中进行各种复杂的计算操作。

结语

通过使用Vue和Element UI的Table组件，我们可以轻松实现对表格数据的编辑、删除、新增和合计等操作。希望本文对你在使用Vue+Element UI开发的过程中有所帮助。如有任何疑问或建议，欢迎留言讨论。

本文来自极简博客，作者：时尚捕手，转载请注明原文链接：Vue Element UI-Table实现编辑、删除、新增和合计操作