Vue从零开始开发管理系统（学习笔记第八节）

前言

---

一、完善表格中的内容

1. 在表格中增加新的列，命名为状态和操作

<el-table-column prop="mg_state" label="状态"></el-table-column>
<el-table-column label="操作"></el-table-column>

    2.编写作用域插槽

<template slot-scope="scope"></template>

    3.在作用域插槽中添加开关控件，并将数据绑定至scope.row中，确保单独控制每行。

<el-switch v-model="scope.row.mg_state"></el-switch>

   4.在‘操作’列中，添加三个迷你按钮，分别为修改、删除、 权限。

<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
<el-button type="warning" icon="el-icon-setting" size="mini"></el-button>

   5.为三个按钮分别添加文字提示，并将enterable值设置为false。

<el-tooltip effect="dark" content="修改" placement="top" :enterable="false">
      <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
</el-tooltip>
<el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
      <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
</el-tooltip>
<el-tooltip effect="dark" content="权限" placement="top" :enterable="false">
       <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
</el-tooltip>

 二、实现完整分页功能

1.配置分页参数

1. 将完整的分页功能代码拷贝至</el-table>下方。

       <el-pagination
         @size-change="handleSizeChange" @current-change="handleCurrentChange"
         :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]"
         :page-size="100"
         layout="total, sizes, prev, pager, next, jumper" :total="400">
       </el-pagination>

   其中@size-change是当每页显示多少行发生变化时，执行的方法。@current-change是当当前所在页页数发生变化时，执行的方法。:current-page绑定的是当前显示页，:page-size绑定的是每页显示多少行，而：page-sizes则是规定每页可选以多少行来显示。layout控制着全局的控件是否显示，:total绑定的是一共有多少个数据。

2. 将v-on的内容与data数据中心中的内容绑定。

       <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="400">
       </el-pagination>

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="400">
       </el-pagination>
   
   methods:{
       handleSizeChange(NewSize){
           this.queryInfo.pagesize=NewSize
           this.getUserList()
       },
       handleCurrentChange(NewCurrent){
           this.queryInfo.pagenum=NewCurrent
           this.getUserList()
       }
   }

2.实现回传服务器参数

在switch控件中，调用change这一回调函数，并传参scope.row。

<el-switch v-model="scope.row.mg_state"  @change="ChangeState(scope.row)"></el-switch>

在methods中，编写方法。

async ChangeState(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(res.meta.msg)
    }
    this.$message.succes('用户状态更新成功')
}

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。