Vue3+typeScripte -04

本节：用户页面的编写

1.写好接口文档，获取后端数据

2.写类型规范文档

遇到的问题：  74:19  error  'row' is not defined  no-undef，，意思是这个是类型错误，你没有定义类型，定义一下类型就可以了

 

 scope.row的数据：

遇到的问题：

map可以赋值不同类型，而且是数组的赋值 

 

 

解决问题了，原因是multiple多选的单词写错了，还有就是label和value 的对应关系没有搞清，晒所以一直有问题。通过value的id，可以赋值到label对应的值 

以下所有的代码：

1.接口文件

//我要用到的一些接口
import service from "@/request/index";
import {ILoginData} from "@/type/login";  //引入接口

// 登录接口
export function login(data: ILoginData) {//接口ILoginData接口的变量名
    return service({
        url: "/login",
        method: "POST",
        data
    })
}

// 商品列表接口
export function getGoodsList(){
    return service({
        url: "/getGoodsList",
        method: "GET"
    })
}

// 用户列表接口
export function getUserList(){
    return service({
        url: "/getUserList",
        method: "GET"
    })
}

// 角色列表接口
export function getRoleList(){
    return service({
        url: "/getRoleList",
        method: "GET"
    })
}

// 权限列表接口
export function getAuthorityList(){
    return service({
        url: "/getAuthorityList",
      method: "GET",
    })
}

2.代码规范，变量的编写文件

export interface userLint { //定义接收后端数据的接口
  nickName: string,
  id: number,
  role: RoleInt[],
  // //数组里面有很多对象，
  // 所以数组要每一个对象都进行规范化，
  // 所以给数组也单独写一个接口,然后这个数据类型不要导出，不用export

  // 这里获取的是后端的数据，所以属性名要和后端的一模一样，不然会找不到
  userName:string
}
interface RoleInt { //用户规则，类型规范
  role: number,
  roleName:string,
}

interface selectDataInt { //搜索之后的用户类型规范
  role: number,
  nickname:string,
}

interface RoleListInt { 搜索之后的用户规则规范
  authority: number[]
  roleId: number
  roleName: string
}
interface ActiveInt { 
  nickName: string,
  id: number,
  role: number[],
  // //数组里面有很多对象，
  // 所以数组要每一个对象都进行规范化，
  // 所以给数组也单独写一个接口,然后这个数据类型不要导出，不用export

  // 这里获取的是后端的数据，所以属性名要和后端的一模一样，不然会找不到
  userName:string
}

//搜索数据的类，这些数据都是自己定义的变量名字
//因为selectDataInt是数组，所以要写接口定义每个变量的类型
export class InitData { 
  selectData: selectDataInt = {//搜索之后的数据
    role: 0,