2022-07-09 vue项目-通用后台管理系统(七) Users页的动态分页效果:把其total,currentPage,pageSize,queryinfo属性改成动态绑定,并实现两个函数的功能

零.用户列表中的"状态"和"操作"加上相关按钮

1.效果

2.样式:在el-table的相关子标签中添加样式

<!-- 2.用户列表渲染 -->
<el-table :data="userlist" style="width:100%">
	...
  <!-- 状态:在状态栏中添加开启/关闭图标按钮 -->
  <el-table-column label="状态" prop="MgState"  width="100px">
    <!-- 使用到了作用域插槽 -->
    <template slot-scope="dfdf">
       <!-- 绑定事件函数:userState() -->
      <el-switch v-model="dfdf.row.MgState" active-color="#13ce66" @change="userState(dfdf.row)"></el-switch>
    </template>
  </el-table-column>
  <!-- 操作:扩大宽度以容纳两个button -->
  <el-table-column label="操作"  width="200px">
    <!-- 插入两个按钮:添加和删除,先写死 -->
    <template>
      <el-button type="success" size="mini">添加</el-button>
      <el-button type="danger" size="mini">删除</el-button>
    </template>
  </el-table-column>
</el-table>

3.接口:在vue.config.js中写入新的接口:./api/userupdate

 /****点击改变用户状态按钮和接口****/
 /* *api/userupdate */
 app.get("./api/userupdate",(req,res)=>{
   
   var {
   id,MgState}=req.query;
   var user=userlist.filter(u=>u.id=id);
   // 这个user是数据库找到的唯一项
   user.MgState=MgState;
   res.json({
   
     "code":"200",
     "newState":user.MgState
   })
 });

4.获取后台返回的数据

  methods: {
   
    // 函数:获取用户列表
    async getuserlist(){
   
		...略...
    },
    // 函数:改变用户状态,形参:userinfo
    async userState(userinfo){
   
      console.log("userinfo:",userinfo);
      const res=await this.$http("./api/userupdate",{
   params:userinfo});
      console.log("res",res);
      if(res.data.code!=200){
   
        this.$message("请求失败!");
        return;
      }else{
   
        this.$message("处于封禁状态!");
      }
    }
  },

一.Users页动态分页效果

使用到了elementui分页效果:https://element.eleme.cn/#/zh-CN/component/pagination#ji-chu-yong-fa

1.复制分页代码粘贴在user页最下方

<el-pagination
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

2.改成自己需要的样式

<!-- 分页效果 -->
<!-- 注意layoutde 形参顺序会影响页面布局的先后 -->
<!-- 绑定事件一handleSizeChange:每页显示X条后触发 -->
<!-- 绑定事件二handleCurrentChange:当前页 -->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[3,5,7,9]"
  layout="total,sizes,prev, pager, next,jumper"
  :total="10">
</el-pagination>

当前效果:

3.把total属性(总页数)改为动态绑定

3.1.vue.config.js中的**.api/users**接口定义了total

它的值为userlist数组的长度(10条数据)

3.2.data中声明userlist和total,methods的getuselist()方法中获取后台返回的userlist和total

data() {
   
  return {
   
    total:0,
    userlist:[],
    queryinfo:{
   query:'',pagenum:1,pagesize:3}
  };
},
methods: {
   
  // 函数:获取用户列表
  async getuserlist(){
   
    const res=await this.$http.get("./api/users",{
   
      params:this.queryinfo
    });
	//先看看res的结构,根据结构下的参数来获取userlist和total
	console.log("usetlist_slice_res:",res);
	this.userlist=res.data.data;//后台数据赋给变量userlist
	this.total=res.data.total;//后台数据赋给变量total
}

res返回了什么:

3.3.在template中把total改成动态绑定,即:total=total

3.4.效果

4.把currentPage和pageSize改为动态绑定

原先是写死的:

:current-page="1"
:page-size="10"

现在可以用data中的数据: queryinfo:{query:'',pagenum:1,pagesize:3},来给它们动态绑定成:

    :current-page="queryinfo.pagenum"
    :page-size="queryinfo.pagesize"
    :page-sizes="[3,5,7,9]"

*注意page-size和page-sizes是两个不一样的属性:https://element.eleme.cn/#/zh-CN/component/pagination#attributes

5.handleSizeChange和handleCurrentChange两个函数的功能实现

5.1.handleSizeChange函数的触发场景

即:在"X条/页"这个下拉框中的选项被改变时,触发@size-change属性绑定的handleSizeChange函数,且该函数的形参会返回当前X

5.2.handleCurrentChange函数的触发场景

同样的,当前在Y页这个状态被改变时,触发handleCurrentChange函数

形参会返回当前页(Y)
(点击1 2 3 4可以触发,输入"共□页"中的数字也可以触发)

5.3.调整一下./api/users接口中的分页数据(newuserlist)的slice参数

原先是这样的

vue.config.js

      /****获取用户数据****/
      app.get('/api/users', (req, res) => {
   
        //用解构赋值去接get请求传递过来的参数(req.query)
          const {
    query, pagenum, pagesize } = req.query
          var total = userlist.length;
          //这样slice的是userlist第二页的内容
          var newdatalist = userlist.slice(pagenum * pagesize, (parseInt(pagenum) + 1) * pagesize);
          res.json({
   
              'status': 'ok',
              'total': total,
              'data': newdatalist//做好的分页数据
          });
      });

改成如下代码

//改成slice的是userlist第一页的内容
// var newdatalist = userlist.slice(pagenum * pages