vue3+elementPlus：前端自定义el |
您所在的位置：网站首页 › elementuiicon图标自定义 › vue3+elementPlus：前端自定义el |
vue3+elementPlus：前端自定义el
|
重点：template蒙版下svg和use，然后前端遍历添加key和value，取判断放图标 HTML结构：el-tree里面包裹template（关键点） //关键步骤 { { data.name }}方法一：使用for循环 for循环数据，前端自定义tree图标第一种方法，后端key没有icon字段，自己添加 //遍历数据 for(const key in obj){ // console.log(obj[key]); //前端自定义tree图标第一种方法 if (obj[key].nodeType===1) { //后端key没有icon字段，自己添加 obj[key].icon="icon-chang" }else if(obj[key].nodeType===22){ obj[key].icon="icon-peizhi" }else if(obj[key].nodeType===234){ obj[key].icon="icon-jiance" }方法二： 使用map遍历 直接map遍历前端自定义tree图标 res.data.data.map((v) => { //第二种方法 //前端自定义tree图标 if (v.nodeType == 1) { v.icon = "icon-chang"; } else if (v.nodeType == 22) { v.icon = "icon-peizhi"; } else if (v.nodeType == 234) { v.icon = "icon-jiance"; } 完整代码: //html { { data.name }} //js //获取tree数据 const treeList = (key, resolve) => { HeaderList({ id: key, childNodeType: 2324, }) .then((res) => { if (res.status === 200) { //核心代码 // //for循环 //let obj=res.data.data // //遍历数据 //for(const key in obj){ // //前端自定义tree图标第一种方法 //if (obj[key].nodeType===1) { // //后端key没有icon字段，自己添加 //obj[key].icon="icon-chang" //}else if(obj[key].nodeType===22){ //obj[key].icon="icon-peizhi" //}else if(obj[key].nodeType===234){ //obj[key].icon="icon-jiance" //} //} return resolve( res.data.data.map((v) => { //第二种方法 //前端自定义tree图标 if (v.nodeType == 1) { v.icon = "icon-chang"; } else if (v.nodeType == 22) { v.icon = "icon-peizhi"; } else if (v.nodeType == 234) { v.icon = "icon-jiance"; } // console.log(v.nodeType); TreeNode.value.loaded = false; // 主动调用展开节点方法，重新查询该节点下的所有子节点 TreeNode.value.expand(); return { ...v, leaf: !v.hasChildren}; }) ); } }) .catch(() => { return Promise.resolve([]); }); }; //css .icon { width: 20px; height: 20px; font-size: 20px; //margin-right: 10px; //margin-left: 4px; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }作者上一篇文章， 解决前端项目问题：Uncaught (in promise) TypeError: resolve is not a function报错_意初的博客-CSDN博客运行项目浏览器：Uncaught (in promise) TypeError: resolve is not a function报错。 |
【本文地址】