vue+element表格新增功能

要在Vue和Element UI中添加一个新增功能，你需要完成以下步骤：

1. 首先，在你的Vue组件中引入Element UI中的表格组件，并确保你已经正确安装了Element UI：

import { Table, TableColumn, Dialog, Button } from 'element-ui';

2. 在你的Vue组件模板中，添加一个表格组件，并将数据绑定到表格的data属性上：

<template>
  <div>
    <el-table :data="tableData">
      <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="Operation">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)">Edit</el-button>
          <el-button @click="delete(scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

3. 添加一个按钮或其他交互元素，以触发新增事件。在点击事件中，使用Element UI的Dialog组件显示一个对话框，用于输入新增数据：

<template>
  <div>
    <el-button @click="showAddDialog">Add</el-button>
    <el-table :data="tableData">
      <!-- table columns... -->
    </el-table>
    <el-dialog title="Add New Entry" :visible.sync="addDialogVisible">
      <!-- form fields... -->
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        addDialogVisible: false,
        formData: {} // 新增表单数据
      };
    },
    methods: {
      showAddDialog() {
        this.addDialogVisible = true;
      },
      addRow() {
        // 将新增数据添加到表格数据中
        this.tableData.push(this.formData);
        // 关闭对话框并重置表单数据
        this.addDialogVisible = false;
        this.formData = {};
      }
    }
  }
</script>

4. 在对话框中添加表单元素，以允许用户输入新增数据。你可以使用Element UI的Form和FormItem组件来创建表单：

<el-dialog title="Add New Entry" :visible.sync="addDialogVisible">
  <el-form :model="formData">
    <el-form-item label="Name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="Age">
      <el-input v-model="formData.age"></el-input>
    </el-form-item>
    <el-form-item label="Address">
      <el-input v-model="formData.address"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer">
    <el-button @click="addRow">Confirm</el-button>
    <el-button @click="addDialogVisible = false">Cancel</el-button>
  </div>
</el-dialog>

这样，你就可以在Vue和Element UI中添加一个表格的新增功能了。