fluttertextfield 搜索按钮点击事件_vue后台管理：主页用户列表（包含搜索，分页，基本的用户列表）...

• 主要内容简介

  • 1.用户列表获取

  • 2.自定义状态

  • 3.分页

  • 4.搜索

1.用户列表获取

使用异步的方法获取，把条数，页数也重新赋值绑定

created() {
    this.getUserList()
  },
  methods: {
//获取用户列表数据
    async getUserList() {
      let { data: res } = await this.$http.get('users', {
        params: this.queryInfo
      })
if (res.meta.status != 200) {
        return this.$message.error('获取用户列表失败')
      }
      this.userlist = res.data.users
      this.total = res.data.total //条数
      console.log(res)
    },

html

table :data="userlist" border stripe>
xxx其它代码table>

2.自定义状态，比如关闭打卡

js上接受一个每一行的数据scope.row： create_time: (...) email:"adsfad@qq.com" id: 500 mg_state: true mobile: "12345678" role_name: "超级管理员" username

如果失败了，立刻取反，不做任何操作

发送两个参数过去，一个id，一个修改的状态，使用``的方式进行拼接

//监听switch开关的状态
async userStateChanged(userinfo){
console.log(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-table-column label="状态" prop="mg_state">

<template slot-scope="scope"
            >
<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">el-switch>
template>
el-table-column>

3.分页

   
<el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange":current-page="queryInfo.pagenum":page-sizes="[1, 2, 5, 10]":page-size="queryInfo.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"
        >
el-pagination>

关键是把点击当前的数据，重新赋值，然后重新调用函数

    //监听pagesize改变的事件
    handleSizeChange(newSize){
      console.log(newSize);
this.queryInfo.pagesize=newSize;
this.getUserList()

    },
//监听 页码值改变的事件
    handleCurrentChange(newPage){
this.queryInfo.pagenum=newPage;
this.getUserList()
    },

4.搜索功能

双向绑定数据 v-model="queryInfo.query"，

getUserList点击事件(共用一个函数了，因为用例数据的双向绑定)

点击清空:重新刷新页面，回到原来的数据 @clear="getUserList"

 
<el-row :gutter="20">
<el-col :span="8">
<el-input v-model="queryInfo.query" clearable @clear="getUserList" placeholder="请输入内容">
<el-button @click="getUserList" slot="append" icon="el-icon-search">el-button>
el-input>
el-col>
<el-col :span="4">
<el-button type="primary">添加用户el-button>
el-col>
el-row>

• 平时学习过程记录下来笔记，从b站“_Nenio”这个up上传的视频学习的