vue加element实现表格增删改

使用Vue和Element UI可以非常方便地实现表格的增删改功能。

首先，我们需要在Vue中引入Element UI的Table组件，用于显示表格数据。可以通过在Vue组件中引入以下代码来实现：

<template>
  <el-table :data="tableData">
    <!-- 表格列的定义 -->
  </el-table>
</template>

<script>
import { Table } from 'element-ui';

export default {
  components: {
    'el-table': Table
  },
  data() {
    return {
      tableData: [] // 表格数据
    };
  }
}
</script>

接下来，我们需要在data函数中定义tableData，用于存储表格的数据。可以通过向tableData数组中添加对象的方式来定义表格的行数据。例如：

data() {
  return {
    tableData: [
      { name: 'Alice', age: 20 },
      { name: 'Bob', age: 25 },
      { name: 'Charlie', age: 30 }
    ]
  };
}

然后，我们可以使用Element UI提供的Button组件来实现新增、删除和编辑操作。例如：

<el-button @click="addRow">新增</el-button>
<el-button @click="deleteRow">删除</el-button>
<el-button @click="editRow">编辑</el-button>

在Vue组件的methods中定义对应的方法来实现表格的增删改功能。例如：

methods: {
  // 新增一行数据
  addRow() {
    this.tableData.push({ name: '', age: '' });
  },
  // 删除选中的行数据
  deleteRow() {
    const selectedRows = this.$refs.table.selection;
    selectedRows.forEach(row => {
      const index = this.tableData.indexOf(row);
      this.tableData.splice(index, 1);
    });
  },
  // 编辑选中的行数据
  editRow() {
    // 编辑操作
  }
}

通过以上步骤，即可使用Vue和Element UI实现表格的增删改功能。根据具体需求，可以进一步自定义表格列的定义、编辑操作等功能。