vue2.5+elementui+hyperf+jwt实现用户列表页中操作栏编辑功能demo
该项目是以典型的前后端分离架构：hyperf、jwt + vue、element ui
需求：
用户列表页，操作栏中编辑按钮，通过前后端交互实现编辑用户信息功能
完成功能：用户操作栏中编辑用户信息功能
未完成功能：新增 批量删除 ， 操作栏功能，删除等
后续功能：
新增，删除可能就不记录文章了，因为跟编辑差不多一样，批量会继续写
环境：
跟之前的一样（有兴趣的可以自行翻阅）
"dependencies": {
"axios": "^0.21.1",
"element-ui": "^2.15.6",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.6.2"
},
后端测试接口：
hyperf2.1+jwt
use App\Model\Admin;
/**
* 用户编辑
* @Auth("jwt")
* @GetMapping(path="/admin/useredit")
*/
public function useredit()
{
$data = $this->request->all();
$user['name'] = $data['name'];
$user['password'] = $data['password'];
$user['created_at'] = $data['created_at'];
$user['updated_at'] = $data['updated_at'];
$user['status'] = $data['status'];
$res = Admin::query()->where('id', $data['id'])->update($user);
return ['data' => $res];
}
前端vue: 在用户列表页实现功能
/src/views/user/index.vue
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="id" label="ID" width="120"></el-table-column>
<el-table-column prop="name" label="姓名" width="140"></el-table-column>
<el-table-column prop="password" label="密码" width="120"></el-table-column>
<el-table-column prop="created_at" label="添加日期" width="140"></el-table-column>
<el-table-column prop="updated_at" label="更新日期" width="140"></el-table-column>
<el-table-column prop="status" label="状态" width="80" align="center">
<template scope="scope">
<span v-if="scope.row.status==0" style="color:red;">停用</span>
<span v-if="scope.row.status==1" style="color:green;">启用</span>
</template>
</el-table-column>
<el-table-column label="操作" width="140" align="center">
<template scope="scope">
<el-button type="text" size="mini" @click="blockUp(scope.row)" v-if="scope.row.status==1">停用</el-button>
<el-button type="text" size="mini" @click="startUsing(scope.row)" v-if="scope.row.status==0">启用</el-button>
<el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-dialog title="编辑用户" :visible.sync="dialogFormVisible" width="40%">
<el-form :model="form">
<el-form-item label="名称" :label-width="formLabelWidth">
<el-input v-model="form.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="密码" :label-width="formLabelWidth">
<el-input v-model="form.password" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="添加日期" :label-width="formLabelWidth">
<div class="block" style="width: 200px;">
<el-date-picker v-model="form.created_at" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
</div>
</el-form-item>
<el-form-item label="更新日期" :label-width="formLabelWidth">
<div class="block" style="width: 200px;">
<el-date-picker v-model="form.updated_at" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
</div>
</el-form-item>
<el-form-item label="状态" :label-width="formLabelWidth" style="width: 300px;">
<el-radio-group v-model="form.status">
<el-radio label="1">正常</el-radio>
<el-radio label="0">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel('form')">取 消</el-button>
<el-button type="primary" @click="handleEditSubmit('form')">确 定</el-button>
</div>
</el-dialog>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import {users} from '@/components/moduls/config.js'
export default {
data() {
return {
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
password: '',
created_at: '',
type: [],
desc: ''
},
formLabelWidth: '100px',
//tableData: Array(2).fill(item)
tableData: []
}
},
methods: {
//编辑
handleEdit: function (index, row) {
this.dialogFormVisible = true //dialog对话窗口打开
this.form = Object.assign({}, row) //将数据传入dialog页面
this.form.index=index //传递当前index
},
//取消
handleCancel(formName) {
this.dialogFormVisible = false
},
//编辑确定
handleEditSubmit(forName) {
//dialog页面数据写入到tableData页面上
//this.$set(tableName,talbeIndex,data)
this.$set(
this.tableData,
this.form.index,
{
id:this.form.id,
name:this.form.name,
password:this.form.password,
created_at:this.form.created_at,
updated_at:this.form.updated_at,
status:this.form.status
},
)
//异步修改数据
this.axios({
method: 'GET',
url: 'https://blog.zongscan.com/admin/useredit',
params: this.form
}).then(res => {
console.log(res.data)
this.$alert('状态修改成功!', 'is_state', {
confirmButtonText: 'ok'
})
}).catch(function () {
console.log('is_state')
})
this.dialogFormVisible = false
}
},
// mounted() {
// //console.log(localStorage.getItem('token'))
// //赋值
// users().then(res => {
// this.tableData = res.data
// })
// },
created() {
this.axios.get('https://blog.zongscan.com/admin/users')
.then((res) => {
console.log(res.data, 'user-index.vue')
this.tableData = res.data
})
}
}
</script>
<style>
</style>
ps: 注意关注编辑功能代码，其他的代码可以测试用，懒的删了
效果图：
异步请求数据成功返回：
相关文章