携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

获取数据

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

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

修改 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: {},
});

在这里插入图片描述

规范数据

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[] = []//接收角色列表
}

页面展示

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

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

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

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

我们可以增加 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>

运行：

在这里插入图片描述

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

获取数据

规范数据

页面展示