vue列表根据类型渲染不同图标
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、效果图
更多推荐
已为社区贡献2条内容
所有评论(0)