对象套对象

interface StyleAll {
  assigned: Record<string, any>;
  remaining: Record<string, any>;
}
const styleAll = ref<StyleAll>({
  assigned: {
    minWidth: '0',
    width: '0%',
    backgroundColor: '#face00',
    height: '45px',
    textAlign: 'center',
    lineHeight: '45px',
    color: '#fff',
    fontWeight: 600,
    fontSize: '15px'
  },
  remaining: {
    minWidth: '0',
    width: '0%',
    backgroundColor: '#70e17b',
    height: '45px',
    textAlign: 'center',
    lineHeight: '45px',
    color: '#fff',
    fontSize: '15px'
  }
})

枚举

ts类型文件
//状态（0 正常；1 停用）
export enum EnumUserStatus {
  Normal = 0,
  Deactivate = 1,
}
export const EnumUserStatusLabelMap: Record<EnumUserStatus,string> = {
  [EnumUserStatus.Normal]: '正常',
  [EnumUserStatus.Deactivate]: '停用',
}
export const EnumUserStatusColorMap: Record<EnumUserStatus, string> = {
  [EnumUserStatus.Normal]: '#67c23a',
  [EnumUserStatus.Deactivate]: '#f56c6c',
}

vue类型文件

<span :style="{ color: getStatusColor(scope.status) }"> {{ getStatus(scope.status) }} </span>

function getStatus (status: number){
  return EnumUserStatusLabelMap[status as keyof typeof EnumUserStatusLabelMap]
}
const getStatusColor = (status: number) => {
  return EnumUserStatusColorMap[status as keyof typeof EnumUserStatusColorMap]
}

数组套对象

写法一(推荐)

[
  {
    "id": "471582946630108498",
    "mainPicture": true,
    "picturePath": "00482f62-04f6-41b8-8cbb-d8449abb57ac.jpg"
  },
  {
    "id": "471582946630108499",
    "mainPicture": false,
    "picturePath": "00482f62-04f6-41b8-8cbb-d8449abb57ac.jpg"
  }
]


export interface pictureListArrArrObg  {
  id: string
  mainPicture: string
  picturePath: string
}

//export interface pictureListArr  {
//  [index:number]: pictureListArrArrObg
//}

pictureList?: pictureListArrArrObg[]

写法二

[
  {
    "id": "471582946630108498",
    "mainPicture": true,
    "picturePath": "00482f62-04f6-41b8-8cbb-d8449abb57ac.jpg"
  },
  {
    "id": "471582946630108499",
    "mainPicture": false,
    "picturePath": "00482f62-04f6-41b8-8cbb-d8449abb57ac.jpg"
  }
]


export interface pictureListArrArrObg  {
  id: string
  mainPicture: string
  picturePath: string
}

export type pictureListArr  = pictureListArrArrObg[]
//export interface pictureListArr  {
//  [index:number]: pictureListArrArrObg
//}

pictureList?: pictureListArr

写法三(不推荐)

[
  {
    "id": "471582946630108498",
    "mainPicture": true,
    "picturePath": "00482f62-04f6-41b8-8cbb-d8449abb57ac.jpg"
  },
  {
    "id": "471582946630108499",
    "mainPicture": false,
    "picturePath": "00482f62-04f6-41b8-8cbb-d8449abb57ac.jpg"
  }
]


export interface pictureListArrArrObg  {
  id: string
  mainPicture: string
  picturePath: string
}
export interface pictureListArr  {
  [index:number]: pictureListArrArrObg
}

pictureList?: pictureListArr

新建对象

export interface IOrderInfo {
  //头像
  consultantIcon: string
  // 名字
  consultantName?: string
  // 咨询师等级
  consultantLevel?: string
  //联系电话
  consultantPhone?: string
}

const dataList = ref<IOrderInfo>({
  //头像
  consultantIcon:'',
  // 名字
  consultantName: '',
  // 咨询师等级
  consultantLevel: '',
  //联系电话
  consultantPhone: '',
})