vue+elementui实现表格增删改查

首先，我们需要安装 `vue` 和 `element-ui`。

npm install vue element-ui --save

然后，我们在 `main.js` 文件中引入并使用它们：

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

import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

接下来，我们在 `App.vue` 文件中实现表格的增删改查功能。

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入搜索关键字"></el-input>
    <el-button type="primary" @click="handleAdd">添加</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" title="添加/编辑">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="form.age"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
        { name: '王五', age: 22 },
      ],
      searchText: '',
      dialogVisible: false,
      form: {
        name: '',
        age: 0,
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
      },
      editIndex: -1,
    }
  },
  methods: {
    handleAdd() {
      this.form.name = ''
      this.form.age = 0
      this.dialogVisible = true
      this.editIndex = -1
    },
    handleEdit(index, row) {
      this.form.name = row.name
      this.form.age = row.age
      this.dialogVisible = true
      this.editIndex = index
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.editIndex === -1) {
            this.tableData.push({ name: this.form.name, age: this.form.age })
          } else {
            this.tableData.splice(this.editIndex, 1, { name: this.form.name, age: this.form.age })
          }
          this.dialogVisible = false
        }
      })
    },
    handleDelete(index) {
      this.tableData.splice(index, 1)
    },
  },
  computed: {
    filteredData() {
      return this.tableData.filter(item => item.name.indexOf(this.searchText) !== -1)
    },
  },
}
</script>

在上面的代码中，我们使用了 `el-table` 组件来展示数据，并用 `el-table-column` 组件来定义表格列。`el-dialog` 组件用于添加和编辑数据。我们用 `el-input` 组件来实现输入框，用 `el-button` 组件来实现按钮。

表格数据使用了 `tableData` 数组来存储，可以通过 `filteredData` 计算属性来实现搜索过滤。

添加和编辑数据时，我们使用了表单验证和表单重置。可以通过 `el-form` 组件来实现表单验证，用 `el-form-item` 组件来定义表单项。用 `ref` 属性来引用表单实例，用 `$refs` 来获取表单实例。

最后，我们可以通过 `handleAdd`、`handleEdit`、`handleSubmit` 和 `handleDelete` 方法来实现增删改功能。