代码如下:
在操作区域我们可以设置两个按钮删除和
<el-table-column
label="操作"
align="center"
width="319px"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button type="primary" style="font-size:20px;font-weight:bold" @click="handleUpdate(scope.row)">
修改
</el-button>
<el-button
type="danger"
style="font-size:20px;font-weight:bold"
@click="handleDelete(scope.row.id,index)"
>
删除
</el-button>
</template></el-table-column>
删除按钮功能实现:
handleDelete(_row, index) {
this.$notify({
title: '成功',
message: '删除成功',
type: 'success',
duration: 2000
})
this.tableData.splice(index, 1)
},
修改部分功能实现:
修改用户对话框实现
<!-- @close="editDialogClosed" 实现修改账户的重置操作-->
<!-- <修改用户对话框> -->
<el-dialog
title="修改信息"
:visible.sync="editDialogVisible"
style="font-size:20px;font-weight:bold"
width="50%"
>
<el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px">
<!-- <el-form-item label="编号">
<el-input v-model="editForm.id" disabled />
</el-form-item> -->
</el-form>
<el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px">
<el-form-item label="学号" prop="account_name">
<el-input v-model="editForm.account_name" />
</el-form-item>
</el-form>
<el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px">
<el-form-item label="姓名" prop="account">
<el-input v-model="editForm.account" />
</el-form-item>
</el-form>
<el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="70px">
<el-form-item label="学历" prop="pass">
<el-select v-model="editForm.pass" placeholder="请选择学历">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.label"
/>
</el-select>
</el-form-item>
</el-form>
<el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="90px">
<el-form-item label="成绩等级" prop="account_type">
<el-select v-model="editForm.account_type" placeholder="请选择成绩等级">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.label"
/>
</el-select>
</el-form-item>
</el-form>
<el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="100px">
<el-form-item label="身份证号码" prop="identity_id">
<el-input v-model="editForm.identity_id" />
</el-form-item>
</el-form>
<el-form ref="editFormRef" :model="editForm" :rules="editFormrules" label-width="80px">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="editForm.phone" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" round @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" round @click="editUserInfo">确 定</el-button>
</span>
</el-dialog>
script部分:
// 修改表单的验证规则对象
editFormrules: {
account_name: [
{ required: true, message: '请输入学号', trigger: 'blur'
},
{
min: 2,
max: 10,
message: '学号的长度在2~10个字符',
trigger: 'blur'
}
],
account: [
{ required: true, message: '请输入姓名', trigger: 'blur'
},
{
min: 2,
max: 10,
message: '姓名的长度在2~10个字符',
trigger: 'blur'
}
],
pass: [
{ required: true, message: '请选择学历', trigger: 'blur'
},
{
trigger: 'blur'
}
],
account_type: [
{ required: true, message: '请选择成绩等级', trigger: 'blur'
},
{
trigger: 'blur'
}
],
identity_id: [
{ required: true, message: '请输入身份证号码', trigger: 'blur'
},
{
min: 18,
max: 18,
message: '身份证的长度为18个字符',
trigger: 'blur'
}
],
phone: [
{ required: true, message: '请输入电话号码', trigger: 'blur'
},
{
min: 11,
max: 11,
message: '电话号码的长度为11个字符',
trigger: 'blur'
}
// { validator: checkphone, trigger: 'blur' }
]
},
methods部分:
// 修改用户信息并提交
editUserInfo() {
this.$refs.editFormRef.validate(valid => {
if (!valid) return
// 发起修改用户信息的数据请求/
// axios.put('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park' + this.editForm.id, {
// account_name: this.editForm.account_name,
// account: this.editForm.account,
// pass: this.editForm.pass,
// account_type: this.editForm.account_type,
// identity_id: this.editForm.identity_id,
// phone: this.editForm.phone
// })
// if (res.status !== 200) {
// return this.$message.error('更新用户信息失败!')
// }
// 关闭对话框
this.editDialogVisible = false
// 刷新数据列表
// this.fetchdata()
// 提升修改成功
this.$message.success('更新用户信息成功!')
})
},
// 修改用户信息
async handleUpdate(row) {
// console.log(row)
// const { data: res } = await axios.post('https://www.fastmock.site/mock/fc95a74a01e7f9841b9b6a5051f5da07/package/park' + row)
// if (res.status !== 200) {
// return this.$message.error('查询用户信息失败!')
// }
// this.editForm = res.data.data
// this.editForm = Object.assign({}, row)
// this.dialogStatus = 'update'
this.editDialogVisible = true
this.editForm = row
},
具体完整代码请参考:http://t.csdn.cn/BSyCd