修改用户状态与搜索功能，以及添加用户对话框

一，修改用户状态

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”，它代表是否显示对话框