增删改查表格

<template>
  <div id="app">
    <div @click="handleAddEvnet">
      <el-button type="primary">添加用户</el-button>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="#">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="age" label="年龄">
        </el-table-column>
        <el-table-column prop="sex" label="性别">
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEditEvent(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDeleteEvent(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增编辑表单 -->
    <el-dialog :title="ditDialogType === 'add' ? '添加用户' : '编辑用户'" :visible.sync="addAndEditDialogVisible" width="30%"
      @close="handleCloseEvent">
      <el-form :model="addFormData" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addFormData.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="addFormData.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="addFormData.sex"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addAndEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmEvent">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { Message } from 'element-ui'

export default {
  data() {
    return {
      tableData: [{
        id: '11111',
        name: '张三',
        age: 30,
        sex: '男'
      },],
      addAndEditDialogVisible: false,
      addFormData: {
        id: '',
        name: '',
        age: '',
        sex: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请输入性别', trigger: 'blur' }
        ],
      },
      // 记录弹窗是编辑还是添加
      ditDialogType: ''
    }
  },
  methods: {
    handleAddEvnet() {
      this.ditDialogType = 'add'
      this.addAndEditDialogVisible = true
    },
    handleConfirmEvent() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return
        if (this.ditDialogType === 'add') {
          this.addFormData.id = this.uuid()
          // 这里编辑和删除要有一个唯一值 所以添加的时候要有一个唯一标识 这里掉接口的话我们就不用写了，后端会返回一个唯一值
          this.tableData.unshift(this.addFormData)
          Message.success('添加成功!')
        } else {
          this.tableData.forEach((item, index) => {
            if (this.addFormData.id === item.id) {
              this.tableData.splice(index, 1, this.addFormData)
              Message.success('编辑成功')
            }
          })
        }
        this.addAndEditDialogVisible = false
      })
    },
    //编辑
    handleEditEvent(id) {
      this.tableData.forEach(item => {
        if (item.id === id) {
          this.addFormData = JSON.parse(JSON.stringify(item))
        }
      })
      this.ditDialogType = 'edit'
      this.addAndEditDialogVisible = true

    },
    // handleDeleteEvent(e){
    //   this.tableData.splice(e,1)
    // },
    //删除
    handleDeleteEvent(id){
  this.tableData.forEach(item => {
    
    console.log(8,this.tableData);
     if (item.id === id) {
          this.addFormData = JSON.parse(JSON.stringify(item))
           this.tableData.splice(id,1)
           console.log( this.addFormData);
  }
   console.log('点击',id);
   })
 
    },
   //对话框关闭触发的事件
    handleCloseEvent() {
      this.addFormData = {
        name: '',
        age: '',
        sex: ''
      }
    },
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      return uuid
    }
  }
}
</script>

<style scoped lang="scss">
#app {
  padding: 20px;
}
</style>