vue列表根据类型渲染不同图标

1、在utils目录里新增index.js文件

// 根据类型返回图标
export function fileType(type) {
  switch (type) {
    case 0:
      return require("../assets/icons/fileType/file.png");
    case 1:
      return require("../assets/icons/fileType/file_admin.png");
    case 2:
      return require("../assets/icons/fileType/file_separation.png");
    case 3:
      return require("../assets/icons/fileType/file.png");
  }
}

2、在vue页面引入方法

import { fileType } from "@/utils/index.js";

3、在data函数定义方法

data（）{
    return:{
        fileType
    }
}

4、在列表添加icon字段，该字段就是返回的图标

//res.data.data.list是接口返回的列表数据
let tableData = res.data.data.list.map((item) => {
       //docType 根据类型判断显示的图标
       item.icon = fileType(item.docType);
       return item;
});

5、效果图