在vue3中使用el-tree-select做一个树形下拉选择器

el-tree-select是一个含有下拉菜单的树形选择器,结合了 el-tree 和 el-select 两个组件的功能。

因为包含了el-tree的功能,我们可以自定义tree的节点,创造出想要的组件

使用default插槽可以自定义节点内容,它的default插槽相当于el-tree的default插槽

<template><el-tree-selectv-model="dirCode":data="treeData":highlight-current="true":props="defaultProps"clearablefilterablenode-key="pathCode":placeholder="placeholder"@clear="handleClear"><template #default="{ node, data }"><div class="custom-tree-node" @click="data.pathCode !== '-1' ? handleNodeClick(data) : ''"><div class="tree-icon"><!-- 这里的svg-icon是我自己加的,可以改成element-plus中的icon ----><svg-icon class="file" icon-class="file"></svg-icon></div><div class="tree-label one-line"><span class="tree-label-text one-line">{{ node.label }}</span></div></div></template></el-tree-select>
</template>

使用:model-value="modelValue"可以在适合用组件时直接v-model绑定值
我这里使用的是setup式的语法,当然也可以使用setup()方法

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { getDirectory } from 'api/autoOperations/scriptManage'const props = defineProps({placeholder: {type: String,default: '请选择目录',required: false},code: {type: String,default: '',required: false},path: {type: String,default: '',required: false}
})let dirCode = ref('')
let dirPath = ref('')
const treeData = ref([])const emits = defineEmits(['change'])// 树状图默认配置
const defaultProps = reactive({children: 'children',label: 'pathName',isLeaf(data, node) {return data.isLeaf == 'true'}
})watch(() => props.code, (val) => {if (val) {dirCode.value = val}
}, {immediate: true,deep: true
})
watch(() => props.path, (val) => {if (val) {dirPath.value = val}
}, {immediate: true,deep: true
})onMounted(() => {getTreeData()
})// 这里从数据库获取数据
const getTreeData = () => {}const handleNodeClick = (data) => {dirCode.value = data.pathCodedirPath.value = data.dirPathemits('change', {dirPath: dirPath.value,dirCode: dirCode.value})
}const handleClear = () => {dirCode.value = ''dirPath.value = ''emits('change', {dirPath: dirPath.value,dirCode: dirCode.value})
}</script>

这是我的自定义样式,用的scss

<style lang="scss" scoped>
.custom-tree-node {display: flex;justify-content: space-between;align-items: center;width: calc(100% - 24px);font-size: 12px;line-height: 24px;.tree-icon {width: 20px;display: flex;align-items: center;.file {width: 20px;font-size: 20px;vertical-align: text-bottom;}}.tree-label {width: 100%;height: 24px;line-height: 24px;.tree-label-text {display: inline-block;max-width: calc(100% - 30px);}}
}
</style>

最后是效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/723956.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Day19:信息打点-红蓝队自动化项目资产侦察武器库部署企查产权网络空间

目录 各类红蓝队优秀工具项目集合 自动化-武器库部署-F8x 自动化-网络空间-AsamF 自动化-企查信息-ENScan 自动化-综合架构-ARL&Nemo 思维导图 章节知识点 Web&#xff1a;语言/CMS/中间件/数据库/系统/WAF等 系统&#xff1a;操作系统/端口服务/网络环境/防火墙等 应…

高中数学:单调奇偶综合(较难)

一、奇偶性扩展 1、普通轴对称函数 要会根据抽象函数的关系&#xff0c;找出对称轴 简便记法&#xff1a;纵相等&#xff0c;对称轴 2、普通中心对称函数 要会找出对称中心点坐标 简便记法&#xff1a;纵和定&#xff0c;中心点 二、题型汇总 解题方法 抽象函数 1、…

如果不使用管理器,星露谷如何安装模组

Mac、Linux、安卓系统建议阅读官方WIKI 如果你没有特殊的需求&#xff0c;可以使用小火星露谷管理器一键安装模组 https://smallfire.cn 1. 什么是模组&#xff1f; 扩展或修改游戏的文件。可以改变游戏。功能如下&#xff1a; 扩展游戏内容&#xff0c;比如添加额外的游戏…

斐波那契数列js

斐波那契数列是一个经典的数学问题&#xff0c;它的定义是&#xff1a;第一个和第二个数都是1&#xff0c;从第三个数开始&#xff0c;每个数都是前两个数的和。斐波那契数列的前几个数字依次为&#xff1a;1, 1, 2, 3, 5, 8, 13, 21, … 在JavaScript中&#xff0c;可以使用递…

C++ 多态的概述

文章目录 1、概念2、引入3、使用基类指针、引用 访问 子类对象中的成员方法&#xff08;虚函数&#xff09;4、基类指针作为函数的参数 函数可以操作该基类派生出的任意子类对象 1、概念 多态是c的特征之一 多态的分类&#xff1a;静态多态&#xff08;静态联编&#xff09;、…

Android Studio开发(二) 常用布局

1、概述 在Android Studio中&#xff0c;布局方式指的是用于定义和排列界面元素&#xff08;如按钮、文本框、图片等&#xff09;的方式。Android应用的界面通常由多个视图组件组成&#xff0c;而布局方式则确定了这些视图组件在屏幕上的位置、大小和相互关系。 适应不同屏幕尺…

常用办公工具汇总

一、流程图类工具 1、xmind 2、draw.io

时钟显示 html JavaScript

sf.html <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>时间</title><script>function showTime(){var timenew Date();var datetime.getDate();var yeartime.getFullYear();var monthtime.getMonth()1;var …

Tailscale中继服务derper使用docker-compose部署

docker启动 docker run --restart always \--name derper -p 12345:12345 -p 3478:3478/udp \-v /root/.acme.sh/xxxx/:/app/certs \-e DERP_CERT_MODEmanual \-e DERP_ADDR12345 \-e DERP_DOMAINxxxx \-d ghcr.io/yangchuansheng/derper:latestdocker-compose启动 version: …

execl表格,检测单元格是否为有效的手机号码

IF函数&#xff0c;判断不满足条件&#xff0c;返回false。 AND(LEN(B2)11,IF(OR(MID(B2,2,1)"0",MID(B2,2,1)"1",MID(B2,2,1)"2",MID(B2,2,1)"4"),FALSE,TRUE),ISNUMBER(VALUE(B2)),LEFT(B2,1)"1") 备注&#xff1a;LEN函数…

vue3中的生命周期有哪些和怎么使用?

目录 前言&#xff1a; 正文&#xff1a; 总结: 前言&#xff1a; Vue.js 3是Vue.js框架的最新主要版本&#xff0c;引入了一些重大的改变和增强。在Vue 3中&#xff0c;由于Composition API的引入&#xff0c;生命周期钩子被替换为生命周期函数。 正文&#xff1a; 以下是…

如何系统的学习Python——类和对象

在Python中&#xff0c;类&#xff08;Class&#xff09;和对象&#xff08;Object&#xff09;是面向对象编程&#xff08;OOP&#xff09;的核心概念。 类&#xff08;Class&#xff09;&#xff1a; 定义&#xff1a; 类是一种抽象的数据类型&#xff0c;它定义了一组属性…

CUDA学习笔记05:矩阵相乘

参考资料 CUDA编程模型系列三(矩阵乘)_哔哩哔哩_bilibili 极力推荐的良心课程~ 代码片段 #include <stdio.h>const int matrix_size 32; const int BLOCK_SIZE 16;__global__ void matrix_multi(const int* a1, const int *b1, int *c1, const int size) {int y b…

Golang的Channel源码阅读、工作流程分析。

Channel整体结构 源码位置 位于src/runtime下的chan.go中。 Channel整体结构图 图源&#xff1a;https://i6448038.github.io/2019/04/11/go-channel/ Channel结构体 type hchan struct {qcount uint // total data in the queuedataqsiz uint // si…

lightGBM的学习整理

执行步骤 1、初始化&#xff0c;选择一个初始模型&#xff0c;通常是一个常数&#xff0c;比如分类问题中内的类别概率的先验值&#xff0c;回归问题中的目标变量的平均值。 2、训练决策树&#xff0c;对于每一轮迭代&#xff0c;计算当前模型的梯度&#xff08;损失函数的负…

外汇天眼:投其所好精设“杀猪盘”!假冒平台诈骗360万!

近年来&#xff0c;愈来愈多民众有感于物价急速上涨&#xff0c;为了避免因为通胀而导致资产持续缩水&#xff0c;纷纷开始寻找可以获利的投资机会&#xff0c;没想到却因此落入诈骗集团的陷阱&#xff0c;蒙受极大的财务损失。 最近外汇天眼就收到一位受害者针对IMX的爆料&…

亚信安慧AntDB:数据库自主创新的缩影

AntDB作为一款自主研发的数据库系统&#xff0c;具备了国产化升级改造的核心能力。这款数据库系统通过不懈努力和持续探索&#xff0c;实现了从跟随他人到引领潮流的华丽转身。AntDB不仅仅是一种技术产品&#xff0c;更是体现了自主研发能力的缩影&#xff0c;体现了科技企业在…

错误: 在字段 “id“ 中空值违反了非空约束

AUTO(0, “数据库ID自增”), INPUT(1, “用户输入ID”), ID_WORKER(2, “全局唯一ID”), UUID(3, “全局唯一ID”), NONE(4, “该类型为未设置主键类型”), ID_WORKER_STR(5, “字符串全局唯一ID”); TableId(value “id”,type IdType.INPUT) // 主键手动输入

操作系统---第一课

操作系统&#xff1a; 控制和管理整个计算机系统的硬件和软件资源。向上层提供方便易使用的服务&#xff0c;是最接近硬件的一层软件。 功能&#xff1a;文件管理&#xff0c;存储器管理&#xff0c;设备管理&#xff0c;处理机管理。 操作系统的四个特征&#xff1a; 并发 &…

2024最新Android大厂面试真题大全,推荐学习

历时半年&#xff0c;我们终于整理出了这份市面上最全面的最新Android面试题解析大全&#xff01; 章节目录 第一章&#xff1a;Android 基础 面试题 第二章&#xff1a;Android 高级 面试题 第三章&#xff1a;开源框架实战面试解析 第四章&#xff1a;Java 面试题 第五章&a…