项目--用户管理（用户列表）（面包屑 搜索栏 表格 分页 全局过滤器 日期处理）

最新推荐文章于 2021-04-21 11:34:14 发布
最新推荐文章于 2021-04-21 11:34:14 发布
阅读量351 收藏 1
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45955954/article/details/108366188
版权

新建用户列表组件

<template>
  <div>
    yonhu
  </div>
</template>

<script>
  export default {
    name:'Users'
  }
</script>

<style scoped>

</style>

配置路由

在/ 路由下配置children子路由
 children: [
      	{
      		path: 'users',
          name:'users',
      		component: Users
      	}
          ]

在主页 main 添加路由渲染

<router-view/>

修改用户列表组件内容

添加容器 el-card class="box-card"  卡片 相当于div容器
  <el-card class="box-card">
    <!-- 面包屑-->
    
    <!-- 搜索-->

    <!-- 表格-->

    <!-- 分页-->

  </el-card>


样式
.box-card {
    height: 100%;
  }

在主页侧边导航栏（el-menu）标签开启路由模式

:router='true'

找到用户列表这个 修改index值

<el-menu-item index="users">
              <i class="el-icon-circle-check"></i>
              <span>用户列表</span>
            </el-menu-item>

添加面包屑

    <!-- 面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item >用户列表</el-breadcrumb-item>
    </el-breadcrumb>

添加搜索

<!-- 搜索-->
    <el-row class='searchRow'> <!-- row 一行显示-->
      <el-col>
        <!-- 搜索框 -->
        <el-input placeholder="请输入内容" v-model="query" class="inputSelect">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <!-- 添加用户按钮 -->
        <el-button type="success">添加用户</el-button>
      </el-col>
    </el-row>

样式
.inputSelect{ /* 搜索框样式*/
    width:300px;
  }
  .searchRow{ /* 行样式*/
  margin-top: 20px;
  }

添加表格

    <!-- 表格   :data=数据源  el-table-column(lable 表头  prop='数据')  -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>

添加数据源
  
data 绑定数据源
data() {
      return {tableData：[],  /* 表格绑定的数据*/}
      }

发送 axios 用户列表请求 获取用户列表数据

1.methos：{ getUserlist（发送请求）}
2.created（this.getuserlist()）调用方法 
3.接口文档中 除了登录以外的所有请求都要进行授权 -> 设置请求头
    //设置请求头  让请求头带token 不带获取不了数据
    const AUTH_TOKEN = localStorage.getItem('token')
   	this.$http.defaults.headers.common['Authorization'] = AUTH_TOKEN;

methos：{ getUserlist（发送请求）}

data设置请求数据  以及获取的数据保存
data() {
      return {
        /* 用户列表请求数据
        query	查询参数	可以为空
        pagenum	当前页码	不能为空
        pagesize	每页显示条数	不能为空
        */
        getusersList: {
          query: '',
          pagenum: 1,
          pagesize: 2
        },
        tableData: [], //用户列表数据源
        total: -1, //用户数据总数

      }
    },

    methods: {
      //获取用户列表的请求
      async getUserList() {
              //设置请求头  让请求头带token 不带获取不了数据
              const AUTH_TOKEN = localStorage.getItem('token')
              this.$http.defaults.headers.common['Authorization'] = AUTH_TOKEN;
              
              //{params:this.usersList }这样params属性的对象都将会拼接到url上，成为url?a=1&b=2的形式。
              const res = await this.$http.get('/api/users', {
                params: this.getusersList
              })
              console.log(res)

              //对象解构赋值
              const {meta: {status,msg},data: {users,total}} = res.data
              if(status===200){
                 //1.给表格数据赋值
                 this.tableData=users
                 //2.给total赋值
                 this.total=total
                 //提示
                 this.$message.success(msg);
              }

      }
    }

在created调用方法
created() {
      this.getUserList()
    },

渲染用户表格一般数据

<!-- 表格   :data=数据源  el-table-column(lable 表头  prop='数据')  -->
   <el-table :data="tableData" style="width: 100%">
     <el-table-column type='index' label="#" width="180">
       <!-- type='index' 添加序号从1开始-->
     </el-table-column>
     <el-table-column prop="username" label="姓名" width="180">
     </el-table-column>
     <el-table-column prop="email" label="邮箱" width="180">
     </el-table-column>
     <el-table-column prop="mobile" label="电话" width="180">
     </el-table-column>
     <el-table-column prop="create_time" label="创建日期" width="180">
     </el-table-column>
     <el-table-column prop="mg_state" label="用户状态" width="180">
     </el-table-column>
     <el-table-column prop="a" label="操作">
     </el-table-column>
   </el-table>

处理日期格式 插件Moment.js 及全局过滤器

npm install moment --save  安装

在main导入
import moment from 'moment'

编写日期全局过滤器
Vue.filter('fmtdate',(v)=>{
	return moment(v).format('YYYY-MM-DD');
})

处理表格日期数据

      <el-table-column  label="创建日期" width="180">
        <!-- 如果单元格内显示的内容不是字符串  需要给被显示的内容外层包裹一个tenplate-->
        <!--
        templaten内部要使用数据  设置 slot-scope属性  作用传值 
        该属性的值要用数据的数据源  会自动找 el-table的数据源也就是tableData
   		tableData.row.create_time  使用要.row.属性名
		因为每个组件的数据不是共享的
        -->
        <template slot-scope='tableData'>
          {{tableData.row.create_time|fmtdate}}
        </template>
      </el-table-column>

用户状态开关

<el-table-column  label="用户状态" width="180">
        <template  slot-scope='tableData'>
          <el-switch v-model="tableData.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" >
          </el-switch>
        </template>
      </el-table-column>

操作按钮 添加 删除 修改

<el-table-column  label="操作">
        <template slot-scope='tableData'>
          <el-button size='mini' plain  type="primary" icon="el-icon-edit" circle></el-button>
            <el-button size='mini' plain type="success" icon="el-icon-check" circle></el-button>
            <el-button size='mini' plain type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>

分页设置

<!-- 分页-->
    <!--
    @size-change 每页显示条数变化时 触发
    @current-change 当前页改变时 触发
    current-page 设置当前是第几页  绑定data的值
    page-sizes 每页多少条的数据组  
    page-size  设置显示多少条 绑定data的值
    total 数据总数 绑定data的值
    -->
    <!--
    -->
    <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="getusersList.pagenum"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="getusersList.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

在methods绑定分页方法

//分页方法
        //每页显示多少条数据方法
       handleSizeChange(val) {
              console.log(`每页 ${val} 条`);
              this.getusersList.pagesize=val  //把每页显示条数重新设置 发送查询用户请求
              this.getUserList()
            },
       //切换页码方法
       handleCurrentChange(val) {
              console.log(`当前页: ${val}`);
              this.getusersList.pagenum=val //把当前页码重新设置 发送查询用户请求
              this.getUserList()
            },

搜索功能

搜索图标绑定点击事件

@click='searchuUser()'

methods 绑定方法

//搜索用户   因为之前已经预留了 query 属性 当用户输入时候 v-moder绑定了query  所以直接重新调用就可以了 
      searchuUser(){
        this.getUserList()
      },

输入框清空搜索框 重新获取数据

clearable  添加清空属性
@clear='loadUserList()'   点击清空时触发方法 绑定清空搜索框

  //清空搜索框  重新获取数据
      loadUserList(){
        this.getUserList()
      },

添加用户功能

添加弹层（对话框）

<!-- 对话框-->
     <!-- 添加用户对话框 弹层   dialogFormVisibleAdd属性控制弹出和关闭-->
     <el-dialog title="添加用户" :visible.sync="dialogFormVisibleAdd">
       <el-form :model="form">
         <el-form-item label="用户名" label-width="100px">
           <el-input v-model="form.username" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="密 码" label-width="100px">
           <el-input v-model="form.password" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="邮箱" label-width="100px">
           <el-input v-model="form.email" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="电话" label-width="100px">
           <el-input v-model="form.mobile" autocomplete="off"></el-input>
         </el-form-item>

       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
         <el-button type="primary" @click="dialogFormVisibleAdd = false">确 定</el-button>
       </div>
     </el-dialog>

data添加需要的数据 form表单 dialogFormVisibleAdd 弹出控制开关

        dialogFormVisibleAdd : false ,//添加用户的弹出和关闭数据
        //添加用户的表单需要提交的数据
        /* 参数名	参数说明	备注
        username	用户名称	不能为空
        password	用户密码	不能为空
        email	邮箱	可以为空
        mobile	手机号	可以为空*/
        form:{
           username : '',
           password : '',
           email : '',
           mobile : ''
        }

用户添加按钮绑定方法 控制弹出和关闭

 @click='showAddUserDia()'

methods方法
     //添加用户弹层开关
      showAddUserDia(){
        this.dialogFormVisibleAdd = true
      },

修改弹层确定按钮点击确定时绑定方法 发送请求

@click="addUser()"

methods 方法
//添加用户提交方法-发送请求  users
      async addUser(){
         const res = await this.$http.post('/api/users',this.form)
         console.log(res)
         const {meta:{msg,status},data}=res.data
         if(status===201){
           //1 提示成功
           this.$message.success(msg);
           //2 更新视图数据
           this.getUserList()
           //3 清空文本框
           this.form = {}
         }else{
           //失败提示
           this.$message.error(msg);
         }
         //关闭弹层
         this.dialogFormVisibleAdd = false
      },

删除用户

this.$confirm.then().catch() 点击确认来到-then  点击取消来到 -catch  删除确认提示框

@click='showDeleUserMsgBox(tableData.row.id)' 删除按钮绑定方法 因为slot-scope 可以获取到id

methods 方法

      //删除用户  打开消息盒子（确认或取消删除提示）--发送请求
      showDeleUserMsgBox(userId){
        this.$confirm('删除用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          //发送删除的请求 id----用户id
          //1.data中找userId   X 第一种方法行不通
          //2.把userId以 tableData.row.id  参数形式传递进去
          const res=await this.$http.delete(`/api/users/${userId}`)
          console.log(res)
          //删除成功提示
          if(res.data.meta.status===200){
            this.$message({
              type: 'success',
              message: res.data.meta.msg
            });
          }else{
            this.$message({
              type: 'error',
              message: res.data.meta.msg
            });
          }
          //更新视图
          this.getusersList.pagenum=1 //返回第一页
          this.getUserList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

更新用户信息

更新按钮绑定事件 并绑定data数据的值传输 方便表单显示 slot-scope='tableData'获取数据
@click='showEditUser(tableData.row)'

methods
showEditUser（user） 方法

      //更新用户弹出和关闭 user通过 slot-scope 绑定了用户的数据
      showEditUser(user){
        this.form = user //赋值给data form的数据源 就可以显示在弹窗了  因为v-moder 绑定了 form
        this.dialogFormVisibleEditUser = true //打开弹窗属性
      },

修改提交按钮 发送更新请求

@click="editUser()" 提交按钮绑定事件

methods方法
      //更新用户发送请求
     async editUser(){
        //因为打开更新时候已经打数据赋值给form 所以可以直接获取id
        const res= await this.$http.put(`/api/users/${this.form.id}`,this.form)
        //提示
         if(res.data.meta.status===200){
           this.$message.success(res.data.meta.msg);
         }else{
           this.$message.error(res.data.meta.msg);
         }
        //关闭对话框
        this.dialogFormVisibleEditUser = false //关闭弹窗属性
      },

用户状态修改

绑定会调函数 change
@change='changMsState(tableData.row)'

methods方法
//修改用户状态  因为v-moder 绑定了用户状态  每当点击会调用@change='changMsState(tableData.row)'函数
      async changMsState(user){
        //发送请求
        const res =await this.$http.put(`/api/users/${user.id}/state/${user.mg_state}`)
        //提示
         if(res.data.meta.status===200){
           this.$message.success(res.data.meta.msg);
         }else{
           this.$message.error(res.data.meta.msg);
         }
      },

分配用户角色

1.给按钮添加点击事件
@click='showSetUserRole(tableData.row)'

2.methods方法
async showSetUserRole(user){
        this.currUsername=user.username
        this.currUserid=user.id
        const res1 =await this.$http.get(`/api/roles`)  //获取角色列表
        this.roles= res1.data.data

        const res =await this.$http.get(`/api/users/${user.id}`)//获取当前用户的角色id
        console.log(res)
        this.currRoleId=res.data.data.rid    //赋值显示当前角色权限
        this.dialogFormVisibleSetUserRole=true //角色分配弹出
      },

data数据
        dialogFormVisibleSetUserRole : false ,//角色分配弹出和关闭
        currRoleId : -1, //下拉框绑定的值
        currUsername:'',//角色用户名
        currUserid : '',//当前用户的id值
        roles:[],//保存所有的角色数据

弹层

    <!-- 分配角色对话框 弹层-->
     <el-dialog title="角色分配" :visible.sync="dialogFormVisibleSetUserRole">
       <el-form :model="form">
         <el-form-item label="用户名" label-width="100px">
           {{currUsername}}
         </el-form-item>

         <!--如果外层 select 绑定的值 和option的value相等  当前就会显示该option的lakel的值-->
         <!-- -->
         <el-form-item label="角色" label-width="100px">
           <!-- 绑定currRoleId值 会显示对应的角色-->
           <el-select v-model="currRoleId">
             <el-option label="请选择" :value="-1"></el-option>
             <!-- methods方法获取角色列表赋值给roles  roles循环遍历出角色列表-->
             <el-option :label="item.roleName" :value="item.id" v-for="(item,i) in roles" :key=i>
             </el-option>
           </el-select>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisibleSetUserRole = false">取 消</el-button>
         <el-button type="primary" @click="dialogFormVisibleSetUserRole = false">确 定</el-button>
       </div>
     </el-dialog>

给提交按钮绑定事件
@click="setRole()"

methods 方法
 //分配角色权限方法
     async setRole(){
       //rid	角色 id	不能为空参数body参数
       // :id 要修改用户的id值
       // 请求体中的rid  修改的新角色id
        const res = await this.$http.put(`/api/users/${this.currUserid}/role`,{rid : this.currRoleId})
        console.log(res)
        if(res.data.meta.status===200){
          this.$message.success(res.data.meta.msg);
        }else{
           this.$message.error(res.data.meta.msg);
         }
        this.dialogFormVisibleSetUserRole=false //角色分配关闭
      },
qq_45955954
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 解决多级动态面包屑导航的问题
10-16
今天小编就为大家分享一篇Vue 解决多级动态面包屑导航的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue前端不通过路由实现面包屑功能，弹窗与弹窗之间不通过路由实现面包屑功能，二次封装element ui的面包屑breadcrumb，不使用路由实现面包屑功能效果
qq_40739261的博客
04-08 1691
在一个单页面或者一个弹窗里面，不用路由来实现element ui的面包屑的跳转等功能 可以实现多个.对element的面包屑进行二次封装，可以实现在一个页面里或者一个弹窗里达到路由的效果，实现点击进入下级，点击上级返回。element ui的面包屑不使用路由在单个实现跳转
VUE项目后台管理系统（五）右边主体中的面包屑展示 和 table表格的展示，编辑删除按钮，标签上面的文字提示
一天不写代码难受的博客
04-04 685
目录面包屑的展示table 表格卡片一行里面不同标签的间隔输入框里面的删除按钮表格的展示开关的展示鼠标放到标签上面的文字提示 面包屑的展示 从官网找到对应的代码 拿到这段代码 table 表格 卡片 如果一行里面有不同的标签，那么这些标签如果有间隔的话，可以使用这些 一行里面不同标签的间隔 输入框里面的删除按钮 在输入框里面只要加了那一个属性就可以了。这个的原理是，只要点击了那个X,那么就会触发事件，我们可以在官网里面找到 我们可以绑定这个事件 表格的展示 从官网找到对应的表格，复制过来
给用户列表增加分页与搜索功能
Characterzzzzz的博客
07-24 619
给用户列表增加分页与搜索功能 今天学习了给用户表增加分页功能，以及以username来搜索数据的搜索功能。 首先在bean层增加PageInfo这个分页的实体类，规定分页汇总每页显示的数据数，总页数，数据总条数，当前页： package com.zhongruan.bean; import java.util.List; public class PageInfo<T> { private List<T> list; private int size; p
layui面包屑导航
杨葱儿
03-22 7083
面包屑当点击增加一个数据，当回点时，覆盖原有等级的数据 <!--导航 tap--> <div style="display: flex;justify-content: space-between;padding:0 20px;height: 40px;background: #F0F2F5;line-height: 40px;border-bottom:1px soli...
详解基于iview-ui的导航栏路径（面包屑）配置
10-17
主要介绍了详解基于iview-ui的导航栏路径（面包屑）配置,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue ant-d 实现面包屑和布局和菜单 demo
11-09
Vue ant-d 实现面包屑和布局和菜单 demo，里面使用vue+ant-d实现页面布局，面包屑、路由，菜单功能
vue2.0 elementUI制作面包屑导航栏
08-28
Vue2.0 ElementUI制作面包屑导航栏 标题：Vue2.0 ElementUI制作面包屑导航栏 描述：本篇文章主要给大家详细代码讲解了Vue2.0 ElementUI制作面包屑导航栏的过程，对此有兴趣的朋友可以学习下。 标签：Vue2.0 ...
div+css实现带箭头的面包屑导航栏
12-01
面包屑导航栏是一种常见的网页设计元素，它可以帮助用户理解他们在网站层级结构中的位置，并提供返回上级页面的路径。常见的面包屑导航形式为“主页 > 分类 > 子分类”，通常以链接的形式呈现。然而，为了提升网站的...
面包：在Rails应用中管理和显示面包屑跟踪-精简版
02-05
面包 Loaf在Rails应用程序中管理和显示面包屑路径。产品特点使用控制器和/或视图指定面包屑路径使用Rails约定指定网址没有面包屑痕迹渲染的标记假设使用语言环境文件作为面包屑名称经过Rails >= 3.2和Ruby >= 2.0.0...
CSS 实现面包屑导航
歪脖先生的博客
02-22 7320
面包屑导航CSS 面包屑导航（Bread Crumbs Navigation）是一种辅助和补充的导航方式，非常适合展示站点的层级关系，能帮助用户明确当前所处的位置，并方便地提供返回的路径。面包屑的概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，为了不在森林里迷路，他们就在沿途走过的地方都撒下面包屑，让这些面包屑帮助他们找到回家的路。由此可知，面包屑导航可以让用户清楚了解当前所处位置...
vue实现电商后台管理系统---（4）用户管理
weixin_43485190的博客
09-06 1280
（1）用户管理下的用户列表界面如下所示： 在最上面是一个面包屑的导航区域，主要用到的是element-ui里的<el-breadcrumb>、<el-breadcrumb-item>。 接着用户列表的详细信息用到Card卡片来包裹一个包含搜索框和添加用户按钮的行以及一个表格。 下面的是分页区域，使用Pagination分页。 点击添加用户会弹出添加用户的对话框，点击操作中的每个也会弹出相应的对话框，而点击删除是会弹出是否确认删除的警告。 （2）然后来看一下用户管理下的用户列表功
页面中使用elementui的面包屑
风如也的博客
04-21 4979
使用场景：点击资源列表中的某一行，可以跳转到该行详情，涉及层级关系，考虑用面包屑导航，为了防止面包屑导航在页面刷新时不存在，考虑监听路由参数的变化 分析：假设面包屑导航的名字为 ：全部 > test1 > test2 全部对应的路由参数为 / test1 对应的路由参数为 /test1 test2 对应的路由参数为 /test1/test2 结论：面包屑的名字根据 路由查询参数.split(’/’)分割的数组获取 面包屑的 :to 导航把面包屑的名字按 .join(’/’) 拼接起来 防止刷新
面包屑的实现
chizi7811的博客
05-25 2053
一、效果图 二、后台实现（通过父id查找） 2-1控制层 /** * 根据上级ID查询商品分类列表 * @param parentId * @return */ @RequestMapping("/findByParentId.do") public List&l...
运用datalist标签实现用户的搜索列表
weixin_30770495的博客
10-14 452
datalist是一个很强大的HTML5标签，支持一般类似于模糊查询，以前都是需要js来做的。下面是一个datalist配合js的小例子，主要是实现用户是否存在，以及添加过程中是否重复的判断。 首先是datalis里面绑好数据以后，当用户双击文本框时是可以出现选择下拉框的，输入的时候也得判断是否存在这个用户。具体js如下： 1 function add_account(){ 2 ...
在VSCode中添加.vue文件模版
weixin_45034639的博客
09-11 2257
步骤一: 在VSCode中安装插件: Vetur 步骤二: Code–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 步骤三: 清空文件中原有代码 步骤四: 粘贴自定义的.vue模版 <!-- --> <template> <div class=''></div> </template> &...
aop IllegalArgumentException: warning no match for this type name: [Xlint:invalidAbsoluteTypeName]
qq_34412985的博客
05-22 1094
报错如下：org.springframework.beans.factory.BeanCreationException: Error creating bean with name ‘dataSource’ defined in class path resource [applicationContext.xml]: Initialization of bean failed; nested exception is java.lang.IllegalArgumentException: warning
实现getList分页
weixin_30892037的博客
09-16 441
用js实现页面的分页： 代码 <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#D2EBF3;" height="32"> <tr><td align="right" bgColor="#f7f7f...
如何将vue -element -admin中的面包屑修改为全局样式
最新发布
03-22
您可以通过修改全局样式来更改vue-element-admin中的面包屑样式。您可以在App.vue文件中添加以下样式代码： ``` <style> .el-breadcrumb { font-size: 16px; color: #333; background-color: #f5f5f5; padding: 10px; border-radius: 4px; } </style> ``` 这将更改面包屑的字体大小、颜色、背景颜色、内边距和边框半径。您可以根据需要进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值