el-select下拉框内展示el-tree结构
2024-05-25 19:54:00
el-select下拉框内展示el-tree结构
封装组件
<template><div><!-- :size="size" --><el-selectv-model="mineStatus"ref="searchSelect":placeholder="placeholder":multiple="!Single":disabled="disabled"@change="selectChange":loading="loading"><el-option:value="mineStatusValue"v-on:click="doThis($event)"style="position: relative; width: 100%":style="{ height: height + 'px', 'overflow-y': overflow }"><div style="height: 100%" v-on:click="doThis($event)"><div style="padding-right: 10px" v-on:click="doThis($event)"><el-treev-if="treeData.length":data="treeData":show-checkbox="!Single"ref="tree"style="font-weight: 500"highlight-current:props="defaultProps":default-expand-all="defaultExpandAll":default-checked-keys="defaultCheckedKeys":check-strictly="Single":filter-node-method="filterNode"node-key="id"@check-change="handleCheckChange"@node-click="clickNode"></el-tree></div><divv-if="!treeData.length"style="width: 100%;height: 100%;background-color: #ffffff;text-align: center;">暂无数据</div></div><divid="load"v-show="load"style="position: absolute;left: 0;top: 0;height: 200px;width: 100%;"></div></el-option></el-select></div>
</template><!-- /*** 组件说明* 属性:* 参数 说明 类型 默认值* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++* placeholder 输入框占位文本 String '请选择'* defaultProps 需要使用的展示字段值 Object {children: 'children',label: 'label'}* data tree 的数据源 Array []* filterable 是否开启搜索功能 Boolean false* Single tree下拉是否单选 Boolean false* defaultExpandAll tree是否展开全部节点 Boolean false* defaultCheckedKeys 默认勾选节点 Array []* disabled 是否禁止操作 Boolean Array* size el-option大小尺寸选择 String medium** 事件:* selectTerrEvent 获取选中对象 返回数组*/ -->
<script>
const deepFind = (arr, condition, children) => {let main = [];try {(function poll(arr, level) {if (!Array.isArray(arr)) return;for (let i = 0; i < arr.length; i++) {const item = arr[i];main[level] = item;const isFind = (condition && condition(item, i, level)) || false;if (isFind) {throw Error;} else if (children && item[children] && item[children].length) {poll(item[children], level + 1);} else if (i === arr.length - 1) {main.length = main.length - 1;}}})(arr, 0);} catch (err) {}return main;
};
export default {props: {placeholder: {type: String,required: false,default: "请选择",},defaultProps: {// 需要使用的展示字段值type: Object,default: () => ({children: "children",label: "label",}),},filterable: {type: Boolean, // 是否开启搜索default: false,},Single: {type: Boolean, // 是否单选default: false,},data: {type: Array, // 数据default: () => [],},defaultExpandAll: {type: Boolean, // 是否展开节点default: false,},defaultCheckedKeys: {type: Array,default: () => [],},// size: {// type: String,// default: "medium",// },disabled: {type: Boolean,default: false,},},data() {return {overflow: "hidden",height: 40,load: false,mineStatus: "",mineStatusValue: [],loading: false,deferTimer: null, // 多选复选框高频查找的数据使用到的延时器变量loadingTips: null,SearchData: [], // 搜索的数据treeData: [], // 渲染树的变量callbackDefault: null, // 更新数据 高频回调事件使用到的 延时器变量// timeID: null, // 搜索防抖singleSearch: "", // 单选搜索firstTime: false, // 初次加载 状态};},watch: {singleSearch(newValue, oldValue) {this.$refs.tree.filter(newValue);},// 更新数据/清空输入框data(n) {if (this.firstTime) {if (Array.isArray(n)) {if (n.length) {this.height = 200;this.overflow = "auto";} else {this.height = 40;this.overflow = "hidden";}this.mineStatus = "";this.mineStatusValue = [];this.treeData = n;this.defaultCheckEvent(true);} else {console.error("data 属性必须是一个Array");}}},// 更新勾选数据defaultCheckedKeys(newValue, oldValue) {if (this.firstTime) {clearTimeout(this.callbackDefault);this.callbackDefault = setTimeout(() => {this.defaultCheckEvent(true);}, 300);}},},created() {let that = this;let dataType = true;// 等待 接口树 数据获取完成function dataTerr() {if (!that.treeData.length && dataType) {that.mineStatus = "获取数据中...";setTimeout(() => {that.treeData = that.data;dataTerr();}, 400);} else if (that.treeData.length) {dataType = false;that.height = 200;that.overflow = "auto";that.mineStatus = "";// 是否开启默认勾选if (that.defaultCheckedKeys.length) {that.defaultCheckEvent();}// 初次加载 完成that.firstTime = true;}}dataTerr();// 2.5s后不管有没要获取到数据 都停止setTimeout(() => {dataType = false;that.firstTime = true;}, 2500);},methods: {// 过滤数据 返回搜索结果filterNode(value, data) {if (!value) return true;return data[this.defaultProps.label].indexOf(value) !== -1;},// 阻止事件冒泡 解决点击空白区域事件获取错误的数据bugdoThis(event) {this.$refs.searchSelect.blur();event.stopPropagation();},// select框值改变时候触发的事件selectChange(e) {if (this.Single || !this.treeData.length) {return false;}let arrNew = [];let dataLength = this.mineStatusValue.length;let eleng = e.length;for (let i = 0; i < dataLength; i++) {for (let j = 0; j < eleng; j++) {if (e[j] === this.mineStatusValue[i][this.defaultProps.label]) {arrNew.push(this.mineStatusValue[i]);break;}}}this.$refs.tree.setCheckedNodes(arrNew); // 设置勾选的值},// 默认勾选defaultCheckEvent(lock) {// 避免 多个监听数据更新时同时并发多次if (lock) {this.firstTime = false;}// 筛选出数据存放let defaultData = [];// 根据树id 递归树 筛选出对应的数据if (this.Single) {// 单选let myarr = deepFind(this.treeData,(item, index, level) => item.id === this.defaultCheckedKeys[0],this.defaultProps.children);myarr.forEach((v, l) => {if (v.id === this.defaultCheckedKeys[0]) {defaultData.push(v);}});} else {// 多选this.defaultCheckedKeys.forEach((id, k) => {let myarr = deepFind(this.treeData,(item, index, level) => item.id === id,this.defaultProps.children);myarr.forEach((v, l) => {if (v.id === id) {defaultData.push(v);}});});}// 更新输入框内的默认勾选值let arrLabel = [];let arr = [];defaultData.forEach((item) => {arrLabel.push(item[this.defaultProps.label]);arr.push(item);});this.mineStatusValue = arr;if (this.Single) {this.mineStatus = arrLabel[0];} else {this.mineStatus = arrLabel;}// 解除 状态if (lock) {this.firstTime = true;}this.$emit("selectTerrEvent", defaultData);if (!this.mineStatus.length) {this.$refs.tree && this.$refs.tree.setCheckedNodes([]);}},// 搜索 监听search() {this.loading = true;let val = this.$refs.searchSelect.$data.query;this.SearchData = [];this.treeData = this.data;setTimeout(() => {this.loading = false;this.$refs.tree.filter(val);}, 500);},// 单选点击 复选框事件 @check="handleCheck"handleCheck(data) {if (!this.Single) {return;}this.$refs.tree.setCheckedKeys([]); // 删除所有选中节点this.$refs.tree.setCheckedNodes([data]); // 选中已选中节点},// 单选模式事件clickNode(data, node, obj) {if (!this.Single) {// 多选不执行const index = this.mineStatusValue.findIndex((d) => d.id === data.id);if (index > -1) {this.$refs.tree.setChecked(data, false);} else {this.$refs.tree.setChecked(data, true);}return;}let arrLabel = [];let arr = [];[data].forEach((item) => {arrLabel.push(item[this.defaultProps.label]);arr.push(item);});this.mineStatusValue = arr;this.mineStatus = arrLabel[0];this.$refs.searchSelect.blur(); // 失去焦点 关闭下拉框// 传递数据给父this.$emit("selectTerrEvent", [data]);},// 获取当前复选框 选中的值 赋值到输入框里handleCheckChange() {if (this.deferTimer == null) {this.load = true;this.loadingTips = this.$loading({lock: true,text: "Loading",spinner: "el-icon-loading",background: "rgba(255, 255, 255, 0.5)",target: document.getElementById("load"),});}let res = this.$refs.tree.getCheckedNodes(true, true); // 这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）let arrLabel = [];let arr = [];res.forEach((item) => {arrLabel.push(item[this.defaultProps.label]);arr.push(item);});clearTimeout(this.deferTimer);this.deferTimer = setTimeout(() => {this.mineStatusValue = arr;this.mineStatus = arrLabel;this.load = false;this.loadingTips.close();this.deferTimer = null;this.$emit("selectTerrEvent", res);}, 200);},},
};
</script>
<style scoped>
/* .el-scrollbar__view .el-select-dropdown__list.el-select-dropdown__item.hover{background:red !important
} */.el-select{width: 100%;
}.el-tooltip.item {width: max-content;display: inline-block;border: none;outline: none;
}.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {background-color: #ffffff !important;
}.el-select-dropdown__item {padding: 0;
}.treedownwidth {width: 13px !important;
}.show {display: block;
}.comtreedown {height: 100%;
}.comtreedown .treedown {width: 220px;height: 100%;display: flex;flex-direction: column;color: #ffffff;position: relative;
}.comtreedown .treedown .title {height: 35px;line-height: 35px;font-size: 16px;text-indent: 14px;border-bottom: 1px solid #fff;overflow: hidden;text-overflow: ellipsis !important;white-space: nowrap !important;cursor: pointer;
}.comtreedown .treedown .left {position: absolute;z-index: 8;top: 50%;right: 0px;width: 13px;height: 72px;margin-top: -36px;cursor: pointer;
}.comtreedown .treedown .left img {display: none;
}/* 修改默认样式 */
.el-tree-node__expand-icon {color: #ffffff;
}.comtreedown .el-tree {width: 100%;height: 100%;padding: 10px;color: #ffffff;overflow: auto;border-bottom-left-radius: 10px;
}.el-tree-node__content {width: max-content;min-width: 100%;color: #fff;
}.el-tree-node,
.el-tree-node__children {min-width: 100%;width: max-content;
}.el-tree-node__label {width: auto;overflow: hidden;text-overflow: ellipsis !important;white-space: nowrap !important;
}.el-tree-node__children .el-tree-node__label {width: auto;overflow: hidden;-webkit-overflow: hidden;text-overflow: ellipsis !important;white-space: nowrap !important;
}span.el-icon-caret-right:before {content: "";
}span.el-icon-caret-right:after {content: "\E60E";
}
</style>
使用组件代码
import selectTree from "@/components/common/SelectTree"; //分类下拉树<select-tree:data="manuscriptClass"@selectTerrEvent="selectTerrEvent":defaultExpandAll="true":defaultProps="defaultProps":defaultCheckedKeys="defaultCheckedKeys">
</select-tree>
el-select下拉框内展示el-tree结构相关推荐
- select下拉框分组展示插件的使用--(select-mania插件的使用)
一.概述 在web项目中很多地方用到下拉框,原生的下拉框比较丑陋,之前的文章中介绍过一款用来美化下拉框的插件可以参考: 手把手教你--jquery chosen插件的使用和API(html下拉框美化) ...
- antd select多选_antd多选下拉框一行展示的实现方式
我们都知道antd的select多选时,如果下拉框宽度不足,则自动浮动到下一行将下拉框撑大,但是这回影响到页面的整体布局. 我们期望的效果是,下拉框只显示一行的值,超出一行的部分自动隐藏. 下面有2种 ...
- Vue中select下拉框的默认选中项的三种情况
在Vue中 使用select下拉框 主要靠的是 v-model 来绑定选项 option 的 value 值. select下拉框在界面的展示,我们都希望看到框中有一个值 而不是空白,比如显示 &qu ...
- layui 下拉框空选项不显示_layui下select下拉框不显示或没有效果
Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...
- easyui根据select下拉框内容更新表单内容_Ant Design 4.0 的一些杂事儿 - Select 篇
前几篇: Ant Design 4.0 的一些杂事儿 - Table 篇 Ant Design 4.0 的一些杂事儿 - Form 篇 聊完了 Table 和 Form 两个重型组件,我们来继续聊聊看 ...
- Vue+EleMentUI实现el-table-colum表格select下拉框可编辑
说明: 在进行采购入库的过程中,有必要对表格中的一行进行快速编辑保存,节省时间,提高工作效率!,而不是每次编辑都要弹窗才可编辑 源码:https://gitee.com/charlinchenlin/ ...
- layui怎么给下拉框赋值_layui给select下拉框赋值
转: layui给select下拉框赋值 //重新渲染表单函数 function renderForm() { layui.use('form', function() { var form = la ...
- element ui中select 下拉框在火狐浏览器最后一行显示不完全（谷歌正常）
在项目开发的时候用到了el-scrollbar组件 并且设置了隐藏横向滚动条 下面展示一些 内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...
- 设置select下拉框不可修改的→“四”←种方法
设置select下拉框为不可修改的几种方法: 因为select的特殊性,导致它不能像input表单一样简单地设置一个readonly来限制修改,所以,我们需要进行别的操作! 1.为下拉框添加样式,可以 ...
最新文章
- 微信小程序云开发图片上传完整代码附效果图
- js通过月份判断前三个月_怀孕前三个月如何判断胎儿发育是否健康，看HCG翻倍情况，快收藏...
- python 文件操作 os 如何检索文件夹内文件数量
- socket/WebSocket/WebService/http/https概念
- 故障码123401_电力系统规划设计对电力工程设计的应用
- 从拉格朗日乘数法到KKT条件
- Linux编程手册读书笔记第五章（20140408）
- Java 在指定目录中查找文件
- 线上服务被干爆了，竟然是日志的锅！！
- SecureCRT-SecureCRT如何保存界面的日志信息
- 2021年T电梯修理考试题及T电梯修理考试报名
- 单链表的逆置算法解析
- ffmpeg js转换音频_webRTC使用ffmpeg.js将webm转换为mp4
- matlab方差 anov,方差分析在MATLAB中的应用-数理论文
- 华奥安心延保对代码的敬畏之心
- 在线淘礼金免单采集网网站源码
- Tableau表计算(2):计算依据
- 【R329开发板评测】如何优雅地给开发板刷入TinaLinux
- 电子名片-vcard(一)
- PHP preg_match_all详解