vue3 element-plus el-tree自定义图标

树组件

<template><div class="left-tree"><el-tree:data="treeData.data"node-key="id":props="defaultProps":default-expanded-keys="[0]":default-checked-keys="[0]"@node-click="nodeclick"><template #default="scope"><div class="custom-node"><iclass="tree-icon":class="{'el-icon-caret-right': !scope.node.expanded,'el-icon-caret-bottom': scope.node.expanded,'el-icon-wlj-yuandian': scope.data.is_leaf === 1}":style="{ color: scope.data.is_leaf === 1 ? 'rgb(54,229,150)' : '#409eff' }"/><span>{{ scope.node.label }}</span></div></template></el-tree></div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { getDept } from "@/api/asset"
// 定义派发事件
const emit = defineEmits(['tree-node-click'])
const nodeclick = (data, node, component) => {// console.log('子组件category的节点被点击', data, node, component)// 向父组件发送事件；emit('tree-node-click', data, node, component)
}
let defaultProps = reactive({children: 'children',label: 'name',
})
let treeData: any = reactive({ data: [] })
async function getDeptTree() {const data: any = await getDept({ POST_TYPE: 1 })treeData.data = data.listsconsole.log(treeData)
}
onMounted(async () => {getDeptTree()
})
</script>
<style lang="scss" scoped>
//tree
.el-tree-node__content:hover {background-color: rgb(255, 207, 131);
}
.el-tree-node:focus > .el-tree-node__content {background-color: rgb(255, 207, 131);
}
.el-tree-node__label {font-size: 1.5vh;
}
.el-tree-node__expand-icon {color: transparent;cursor: default;
}//tree
.left-tree {height: 73vh;overflow: auto;
}
/*修改滚动条样式*/
.left-tree::-webkit-scrollbar {width: 10px;height: 10px;/**/
}
.left-tree::-webkit-scrollbar-track {background: rgb(104, 108, 143);border-radius: 10px;
}
.left-tree::-webkit-scrollbar-thumb {background: rgb(54, 229, 150);border-radius: 10px;
}
// .left-tree::-webkit-scrollbar-thumb:hover{//   background: #333;
// }
// .left-tree::-webkit-scrollbar-corner{//   background: #179a16;
// }
.tree-icon {margin-right: 1vh;margin-left: -2vh;
}
.el-tree {background: none;color: #fff;
}
</style>

父组件

<dept-tree  @tree-node-click="treenodeclick"/>
const treenodeclick  = (data, node, component) => {console.log(data);
}

vue3 element-plus el-tree自定义图标相关推荐

easyUI tree 自定义图标
文章转载自: https://blog.csdn.net/zhlantian/article/details/52913115 近期由于项目中需要使用easyui tree树形列表,并在系统中动态配置 ...
vue3+element plus下面，自定义el-table表格标题
参考了网络上很多资料,照着写,都不行,后来自己琢磨了一会儿出来了,代码如下: <el-table-column label="权限列表" scoped-slot>< ...
vue中element ui 中tree组件怎么自定义前缀图标呢?
一问题饿了么ui 默认的图标样式是: 1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点, 2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占 ...
Vue3 Element Plus 动态图标
Vue3 Element Plus 动态图标 Element Plus 中的图标以组件的形式来使用,而在基于Vue 2.x的Element UI中图标是字符串的形式,这样就导致过去的一些使用习惯不得不 ...
element自定义图标；element自定义icon；element-ui自定义tab栏图标；
一.场景:element-ui本身提供了图标,但是不全面或者开发时候需要使用自定义图标展示.此时可以用到elemenUi的自定义图标.参考链接二.html使用,和正常的element的图标 i 标 ...
antd tree组件自定义图标
把树的小三角替换为自定义图标,如下图效果 //小三角收起的背景图设置 ant-tree-switcher_close { width: 16px !important; height: 15px !i ...
使用Vue3+Element Plus开发Chrome插件
使用Vue3+Element Plus开发Chrome插件引言初始Vue项目的创建 Element-Plus组件的安装及导入其他文件配置 .eslintrc.js文件 vue.config.js ...
vue、vue 所有图标属性、vue Icon 所有图标属性、vue 图标所有类型属性、vue 自定义图标 Icon属性
vue.vue 所有图标属性.vue Icon 所有图标属性.vue 图标所有类型属性.vue 自定义图标 Icon属性使用方法 1.线框风格 1.方向性图标 2.提示建议性图标 3.编辑类图标 4 ...
【笔记11】uniapp点击复制；mysql数据库存储emoji表情；Java 二维码生成；uniapp引入自定义图标
目录前言一.uniapp 实现点击复制某段文本二.MySQL 数据库存储 emoji 表情三.Layui 的富文本编辑器四.谷歌 Java 二维码生成 (1) 引入 MAVEN 依赖五.微 ...
iview weapp icon组件自定义图标小程序
写小程序图标没有想要的,需要自定义的时候.可以使用阿里巴巴矢量图标库自定义图标. 找到自己需要的,然后先加入购物车,点开购物车选择下载代码,然后解压压缩包. 复制 iconfont.css中的内容,到 ...

vue3 element-plus el-tree自定义图标

vue3 element-plus el-tree自定义图标相关推荐

最新文章

热门文章