<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>
增删改查表格
于 2022-08-09 22:28:57 首次发布