Vue用户管理模块(实现搜索+用户状态更新功能)

搜索功能

clearable 清空输入框
clear 事件(点击clearable后会触发的事件)

<el-input placeholder="请输入内容" class="input-with-select" v-model="queryInfo.query" clearable @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>

实现用户状态更新

接口文档

 <template slot-scope="scope">
            <div>
              <el-switch v-model="scope.row.mg_state" @change="userStateChange(scope.row)"> </el-switch>
            </div>
          </template>

// 监听 switch开关状态的改变
    async userStateChange(userinfo){
        const {data:res} = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
        console.log(res.meta)
        if(res.meta.status!==200){
            //更新失败时回父为原始数据 （实际上点击按钮时就会更新状态，所以此时需要取反，回到原始）
            userinfo.mg_state = !userinfo.mg_state
            return this.$message.error('更新用户状态失败!')
        }
        this.$message.success('更新用户状态成功!')
    }