• 【vue3+ts后台管理】用户列表

    文章目录

    获取数据

    首先在 request 下的 api.ts 中增加

    //用户列表
export function getUserList(){
    return service({
        url:'/getUserList',
        method:'get',
    })
}
//角色列表
export function getRoleList(){
    return service({
        url:'/getRoleList',
        method:'get',
    })
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    修改 UserView.vue，分别调用获取用户列表、获取角色列表，然后打印返回数据

    export default defineComponent({
  name: 'HomeView',
  setup(){
    const getUser = ()=>{
      getUserList().then(res=>{
        console.log(res)
      })
    }
    const getRole = ()=>{
      getRoleList().then(res=>{
        console.log(res)
      })
    }
    onMounted(()=>{
      getUser()
      getRole()
    })
  },
  components: {},
});


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述
    在这里插入图片描述

    规范数据

    type 文件夹下新建 user.ts

    export interface ListInt {
    id: number,
    nickName: string,
    userName: string,
    role:RoleInt[]
}

interface RoleInt{
    role: number,
    roleName: string
}

interface SelectDataInt{
    role:number,
    nickName: string
}

interface RoleListInt {
    authority: number[],
    roleId: number,
    roleName: string
}
export class InitData {
    selectData: SelectDataInt = {
        role:0,
        nickName:''
    }
    list: ListInt[] = []//接收用户列表
    roleList:RoleListInt[] = []//接收角色列表
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    页面展示

    页面展示和商品列表是差不多的。头部有搜索和筛选，可以进行姓名搜索和角色筛选。其中角色筛选我们可以根据 Select 选择器 写就可以了。

    在获取到用户列表和角色列表后赋值给 data。用于页面的数据展示

    在展示用户列表时，角色 role 字段由于是个数组，在 table 中展示时可以根据 Table 表格流体高度 源码中的 插槽 来写

    		<template #default="scope">
          <el-button
              type="primary"
              size="small"
              @click="deleteRow(scope.row)">
            Remove
          </el-button>
        </template>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    我们可以增加 deleteRow 方法打印下 scope.row 的内容，点击按钮
    在这里插入图片描述
    可以看到 scope.row 得到的是这一行的数据。按照这个思路完善代码如下：

    <template>
  <div>
    <el-form :inline="true" :model="selectData" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="selectData.nickName" placeholder="请输入姓名"/>
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="selectData.role" class="m-2" placeholder="请选择" size="large">
          <el-option
              label="全部"
              :value="0"/>
          <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"/>
      <el-table-column prop="nickName" label="姓名" width="180"/>
      <el-table-column prop="introduce" label="角色">
        <template #default="scope">
          <el-button
              v-for="item in scope.row.role"
              :key="item.role"
              type="link"
              size="small">
            {{ item.roleName }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs} from 'vue';
import {getRoleList, getUserList} from "@/request/api";
import {InitData} from "@/type/user";

export default defineComponent({
  name: 'HomeView',
  setup() {
    const data = reactive(new InitData())

    const getUser = () => {
      getUserList().then(res => {
        data.list = res.data
      })
    }
    const getRole = () => {
      getRoleList().then(res => {
        data.roleList = res.data
      })
    }
    onMounted(() => {
      getUser()
      getRole()
    })

    return {
      ...toRefs(data),
    }
  },
  components: {},
});
</script>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75

    运行：
    在这里插入图片描述

    servlet做的后台用户管理
    application/x-rar 1星 超过10%的资源 398KB
    下载

    用户列表查询

    用户列表查询和商品列表查询类似，我们稍作修改即可

    const onSubmit = () => {
      let arr: ListInt[] = []
      //查询条件是否有值
      if (data.selectData.nickName || data.selectData.role) {
        if (data.selectData.nickName) {
          //将过滤出来的数组赋值给arr
          arr = data.list.filter((value) => {
            return value.nickName.indexOf(data.selectData.nickName) !== -1
          })
        }
        if (data.selectData.role) {
          //将过滤出来的数组赋值给arr
          arr = (data.selectData.nickName ? arr : data.list).filter((value) => {
            return value.role.find((item)=>{return item.role===data.selectData.role})
          })
        }
      } else {
        arr = data.list
      }
      data.list = arr
    }
    //监听筛选的两个属性
    watch([()=>data.selectData.nickName,()=>data.selectData.role],()=>{
      if(data.selectData.nickName == '' || data.selectData.role == 0){
        getUser()
      }
    })
    return {
      ...toRefs(data),
      onSubmit,
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    在这里插入图片描述

    用户列表编辑

    我们在列表最后增加编辑按钮，点击弹出 Dialog，所以我们修改 UserView.vue

    先在 table 里增加编辑按钮

    	<el-table-column prop="introduce" label="操作">
        <template #default="scope">
          <el-button
              type="primary"
              size="small"
              @click="changeUser(scope.row)">
              编辑
          </el-button>
        </template>
      </el-table-column>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    然后把 Dialog 自定义内容中第二个对话框的代码复制过来，稍作修改

    <el-dialog v-model="isShow" title="编辑信息">
    <el-form :model="active">
      <el-form-item label="姓名" label-width="50px">
        <el-input v-model="active.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="角色" label-width="50px">
        <el-select multiple v-model="active.role" placeholder="Please select a zone">
          <el-option
              v-for="item in roleList"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleId"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="updateUser">更新</el-button>
      </span>
    </template>
  </el-dialog>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    vue3+ts入门（todolist案例）
    zip 0星 超过10%的资源 319KB
    下载

    其中 isShow 为是否展示 Dialog，我们可以在 type 下的 user.ts 中增加一个字段。同时增加 active 字段用来保存选中的对象

    interface ActiveInt{
    id: number,
    nickName: string,
    userName: string,
    role:number[]
}

export class InitData {
    selectData: SelectDataInt = {
        role:0,
        nickName:''
    }
    list: ListInt[] = []//接收用户列表，用于展示
    roleList:RoleListInt[] = []//接收角色列表，用于搜索选择器
    isShow = false//是否展示Dialog
    active:ActiveInt = {//保存选中的对象
        id: 0,
        nickName: '',
        userName: '',
        role:[]
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    其中 Dialog 中的 :model="active"为 Dialog 中要显示的数据。我们点击编辑按钮，我们修改 isShow 的值，让对话框显示出来，同时传入所点击的这一行的数据，赋值给 data.active，这样当 Dialog 显示出来的时候里边就会填充要编辑的数据

    	const changeUser = (row:ListInt)=>{
      console.log(row)
      data.active = {
        id: row.id,
        nickName: row.nickName,
        userName: row.userName,
        role:row.role.map((value)=>value.role)
      }
      data.isShow = true
    }
	return {
      ......
      changeUser
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    可以看到在对 active 赋值时，对 role 的赋值进行了一些处理。因为 active.role 的类型我们规定的是数字的数组，和我们传过来的row中的 role 格式不同，我们先将 传过来的row打印下 ：
    在这里插入图片描述
    对 row.role我们进行了处理，map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。我们只把 role 返回即可，roleName 我们暂时不需要

    然后我们对 Dialog 的按钮进行处理，点击更新执行 updateUser 方法

    const updateUser = ()=>{
      console.log(data.active);
      let obj:any = data.list.find((value)=>value.id==data.active.id)
      obj.nickName = data.active.nickName
      //data.active.role --> [1,2]
      //roleList --> roleId --> 1,2
      obj.role = data.roleList.filter(value => data.active.role.indexOf(value.roleId) !== -1)
      //console.log(obj.role)
      data.isShow = false
    }

    return {
      ...toRefs(data),
      onSubmit,
      changeUser,
      updateUser
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    最后我们处理bug，由于更新后 data.list 的 role 结构由 RoleInt 改为了 RoleListInt，所以还需要在展示 Dialog 时对其进行处理，否则编辑后，再打开 Dialog 角色这里就展示不出来了

    const changeUser = (row:ListInt)=>{
      console.log(row)
      data.active = {
        id: row.id,
        nickName: row.nickName,
        userName: row.userName,
        role:row.role.map((value:any)=>value.role || value.roleId)
      }
      data.isShow = true
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    最后运行结果：
    在这里插入图片描述

  • 相关阅读:
    Mac os 安装 nginx 教程（success）
    day49数据库 索引 事务
    VMware Workstation Pro详解
    Executor框架
    solidity开篇：区块链基础
    ：focus伪类选择器
    ArcGIS标注的各种用法和示例
    水稻叶病害数据集（目标检测，yolo使用）
    实现一个 瀑布流 封装until 工具
    自学数据库- MongoDB
  • 原文地址：https://blog.csdn.net/u010356768/article/details/126102002