1、增
<el-button
class="filter-item"
style="margin-left: 1096px;"
type="primary"
icon="el-icon-edit" @click="addFormVisible = true"
>
添加
</el-button>
首先增加一个“添加”按钮。
@click 是点击事件，addFormVisible = true 可以理解为打开一个对话框，对话框里是我们需要添加的表单。
整体就是点击添加按钮，打开一个对话框，对话框里是需要添加的表单信息。
<el-dialog
title="添加信息"
:visible.sync="addFormVisible"
@close="cleanData"
>
<el-form
:model="addform"
:rules="addFormRules"
ref="addformref"
label-position="left"
label-width="70px"
style="width: 400px; margin-left:50px;"
>
<el-form-item label="名字" :label-width="formLabelWidth" prop="name">
<el-input v-model="addform.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
<el-select v-model="addform.gender" placeholder="性别">
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addFormVisible = false">取 消</el-button>
<el-button type="primary" @click="validateAddForm('addformref')">确 定</el-button>
</div>
</el-dialog>
这部分描述了，表单的样子。
首先描述一个对话框el-dialog，:visible.sync 可以理解为绑定的名字，要和上面click事件中的一致，不然点添加按钮没反应，弹不出来东西。另外注意关键字前面的冒号。@close事件是用来清理提交数据的，我们暂且不说。
el-from 就对话框里的表单。model是表单的数据对象，rules是对表单的验证规则，ref也是用来清除/验证表单数据必要属性，其他的是位置样式
获取表单输入数据的总要属性是prop 。
输入框中的addform.name 意思就将输入内容addform.name的值。
另外一个同理。
两点击事件，一个是确定，一个取消。
2、修改
修改数据有一个难点就是，点击修改的时候要获取已经填写好的数据。然后在这个基础上再进行编辑。
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="showEditData(scope.row)">
编辑
</el-button>
<el-button slot="reference" size="mini" type="danger" @click="delData(scope.row)">
删除
</el-button>
</template>
</el-table-column>
点击编辑的事件是把当前的数据传给showEditData这个方法。
showEditData(row) {
this.editform = Object.assign(this.addform, row) //this.form 获取原来行的内容
this.editFormVisible = true
}
显示编辑数据，打开editFormVisible 对话框，然后描述编辑的表单。
<el-dialog
title="编辑信息"
:visible.sync="editFormVisible"
>
<el-form
:model="editform"
:rules="editFormRules"
ref="editformref"
label-position="left"
label-width="70px"
style="width: 400px; margin-left:50px;"
>
<el-form-item label="名字" :label-width="formLabelWidth" prop="name">
<el-input v-model="editform.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
<el-select v-model="editform.gender" placeholder="性别">
<el-option label="男" value="男"></el-option>
<el-option label="女" value="女"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="editFormVisible = false">取 消</el-button>
<el-button type="primary" @click="validateEditForm('editformref')">确 定</el-button>
</div>
</el-dialog>
最后点确定以后，验证编辑表单数据。提交给后端。
3、删除、查询
查询没是可说的最简单接口。直接查询后端数据即可。
说下删除，删除数据唯一凭证就是id，也就是说数据没写入一条进入数据库，数据库会自增id
这个id虽然在页面上不显示，但是getData数据的时候一定要给前端返回。这样前端才能知道，要删除的数据id是啥。
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="showEditData(scope.row)">
编辑
</el-button>
<el-button slot="reference" size="mini" type="danger" @click="delData(scope.row)">
删除
</el-button>
</template>
</el-table-column>
delData(row) {
//console.log(this.row)
this.$confirm('真的想删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.post(apis + '/delete/', {id: row.id})
.then(response => {
this.$notify({
title: 'Success',
message: 'Deleted Successfully',
type: 'success',
duration: 2000
})
this.getData() //添加完毕后获取最新信息
})
}).catch(error => {
console.log(error)
})
}
小技巧是，添加，编辑或是删除完数据以后，通常需要刷新以后，才能展现新的数据，我们可以在方法中加入this.getData() 就可以实现，添加、删除 后自动刷新数据，展示最新数据。
另外this.$confirm 是删除确认功能，避免误操作。
网友评论