一,修改用户状态
api接口文档
修改switch
@change:
<el-table-column label="状态">
<!--作用域插槽,拿到这一行的数据-->
<template slot-scope="scope">
<!--状态开关-->
<el-switch
v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
</el-switch>
</template>
</el-table-column>
methods中添加:
// 监听 switch 开关状态的改变
async userStateChanged(userinfo) {
const { data: res } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
if (res.meta.status !== 200) {
userinfo.mg_state = !userinfo.mg_state
return this.$message.error('更新用户状态失败!')
}
this.$message.success('更新用户状态成功!')
}
二,搜索功能
修改<el-input>:
<el-input placeholder="请输入内容"
v-model="queryInfo.query">
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>
此处可以优化:输入框内加一个清空,可清空输入内容。清空后可以立即搜索全部数据
修改<el-input>:
<el-input placeholder="请输入内容"
v-model="queryInfo.query" clearable >
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>
3,渲染添加用户的对话框
在</el-card>后加入:
<el-dialog
title="提示"
:visible.sync="addDialogVisible"
width="30%">
<!--内容主题区域-->
<span>这是一段信息</span>
<!--底部区域-->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
添加用户按钮处修改:
<el-col :span="4">
<!--点击显示对话框-->
<el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
</el-col>
data()中最后添加:
data() {
return {
//获取用户列表的参数对象
queryInfo: {
query: '',
//当前的页数
pagenum: 1,
//当前每页显示多少条数据
pagesize: 2
},
userList: [],
total: 0,
//控制添加用户对话框的显示与隐藏
addDialogVisible: false
}
},
这一系列操作主要是控制:visible.sync=“addDialogVisible”,它代表是否显示对话框