树形弹窗选择框/vue2/Element/弹框选择

前言

此类选择器根据vue+elementUI实现，使用vue3的可以根据此案例稍作改动即可实现，主要功能有弹出选择、搜索过滤、搜索结果高亮等，此选择器只支持单选，如需多选可在此基础进行改造。

效果图

代码实现

使用时，props-value必须要传，并且要保证其唯一性！！！

HTML

<!-- * @description: 通用树形弹窗选择框* @fileName: treeDialogSelect/index.vue * @author: tan * @date: 2024-09-10 16:31:49* @Attributes: data	展示数据	arrayvalue 展示在输入框的值props	配置选项，具体配置可以参照element ui库中el-tree的配置	objectexpand-first-level 当根节点只有一个是，是否展开，默认为是search-highlight 是否开启搜索高亮，默认开启，仅在slot-tree不传入时生效onFilter 自定义过滤规则，参数为:value 搜索框的值data 原始数据callback 回调函数 接受一个参数类型boolean  为是否展示该节点 !!!!!必传!!!!!! props-value	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 !!!!!!
!-->
<template><div class="treeDialogSelectCom"><slot :value="value" v-if="$slots.default"></slot><el-inputv-elsev-bind="$attrs":value="valueFilter(value)"suffix-icon="el-icon-arrow-down":placeholder="$attrs['placeholder'] || '请选择'":clearable="$attrs['clearable'] || true"class="treeDialogSelectInput"@focus="open"@clear="selectClear()"></el-input><el-dialog:visible.sync="visible":width="$attrs['width'] || '50vw'":append-to-body="true":close-on-click-modal="false":close-on-press-escape="false":title="$attrs['dialog-title'] || '请选择'"><div class="treeDialogBody"><el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable><slot slot="prepend" name="prepend"></slot></el-input><div class="treeDialogBodyTree"><el-treev-bind="$attrs":data="data":props="props"@node-click="handleNodeClick":check-strictly="$attrs['check-strictly']":icon-class="$attrs['icon-class']":lazy="$attrs['lazy']":load="$attrs['load']":node-key="props.value":filter-node-method="filterNode":default-expanded-keys="defaultExpandedKeys"ref="myTree"><template slot-scope="{ node, data }"><slot :node="node" :data="data" name="tree"><span class="slotSpan"><i v-show="!node.disabled && filterText" class="el-icon-warning"></i><span><span v-html="searchHighlightFilter(node, data)"></span><b v-if="$attrs['show-count'] != undefined && data[props.children]">（{{ data[props.children].length }}）</b></span></span></slot></template></el-tree></div></div><div class="footer"><el-button type="primary" plain @click="selectClear()">清 空</el-button></div></el-dialog></div>
</template>

JS

export default {props: {value: {type: undefined,default: null,},data: {type: Array,default: () => new Array(),},props: {type: Object,default: () => {return {label: 'label',value: 'value',children: 'children',};},},},data() {return {defaultExpandedKeys: [],visible: false,filterText: '',};},created() {this.propsInit();},mounted() {setTimeout(this.initData, 10);},beforeUpdate() {this.propsInit();this.initData();},methods: {open() {this.visible = true;},initData() {let newItem = this.recurrenceQuery(this.data, this.props.value, this.value);if (newItem?.length) {if (this.props.value && newItem[0][this.props.value]) {this.defaultExpandedKeys = [newItem[0][this.props.value]];}this.$nextTick(() => {if (this.$refs.myTree?.setCurrentNode) this.$refs.myTree.setCurrentNode(newItem[0]);});} else {if (this.data.length == 1 && this.$attrs['expand-first-level'] !== false) {this.defaultExpandedKeys = [this.data[0][this.props.value]];}}this.$forceUpdate();},// 单选事件handleNodeClick(data, e) {if (this.props.disabled && e.disabled) {return false;} else {if (data[this.props.children] && data[this.props.children]?.length) {return false;}}this.$emit('input', data[this.props.value]);this.visible = false;this.$emit('change', data, e);},//   递归查找通用方法recurrenceQuery(list, key, value) {if (!list || !key || !value) return [];let queryData = [];list.map(item => {if (item[this.props.children] && item[this.props.children].length) {queryData.push(...this.recurrenceQuery(item[this.props.children], key, value));}if (item[key] == value) {queryData.push(item);}return item;});return queryData;},selectClear(flag) {if (!flag) {this.$emit('input', '');this.$emit('change', null, null);}this.$refs.myTree.setCurrentKey(null);this.remoteMethod('');},getCheckedNodes() {if (this.value !== null && this.value !== undefined && this.value !== '') {return this.$refs.myTree.getCheckedNodes();}return [];},getCurrentNode() {if (this.value !== null && this.value !== undefined && this.value !== '') {return this.$refs.myTree.getCurrentNode();}return null;},valueFilter(val) {let res = '';[res] = this.recurrenceQuery(this.data, this.props.value, val);return res?.[this.props.label] || '';},propsInit() {this.props.label = this.props.label || 'label';this.props.value = this.props.value || 'value';this.props.children = this.props.children || 'children';},remoteMethod(query) {this.$refs.myTree.filter(query);},filterNode(value, data) {if (!value) return true;let result = true;if (this.$listeners.onFilter) {this.$emit('onFilter', value, data, res => {result = res;});} else {result = data[this.props.label].indexOf(value) !== -1;}return result;},searchHighlightFilter(node, data) {let { label } = this.props;if (this.$attrs['search-highlight'] === false) return data[label];if (!this.filterText) return data[label];const regex = new RegExp(this.filterText, 'gi');let text = data[label].replace(regex, match => {return `<strong class="highlight">${match}</strong>`;});return text;},},watch: {value: {deep: true,handler(val) {if (!val) {this.selectClear(true);}},},filterText(val) {this.$refs.myTree.filter(val);},},
};

CSS

.selecTree {max-height: 50vh;overflow: auto;padding: 5px;::v-deep .el-tree-node__content {font-size: 14px;}
}
::v-deep.slotSpan {font-size: 14px;> i {color: #67c23a;margin-right: 5px;}b {font-weight: normal;font-size: 12px;color: #999;}.highlight {color: #67c23a;}
}.treeDialogBody {max-height: 60vh;display: flex;flex-direction: column;::v-deep .el-input__validateIcon {display: none;}::v-deep .treeDialogBodyTree {flex: 1;overflow: auto;padding: 12px 8px;margin: 12px 0;background-color: #f5f7fa;border-radius: 5px;.el-tree {background: transparent;.el-tree-node__content:hover {background-color: #eaeef4;}}}
}
.footer {text-align: right;
}

使用案例

<template><treeDialogSelectv-model="treeDialogSelectVal":data="treeDialogSelectData"show-count></treeDialogSelect>
</template><script>
import treeDialogSelect from '@/components/treeDialogSelect';
export default {components: { treeDialogSelect },data() {return {treeDialogSelectValue: '',treeDialogSelectData: [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1',},{id: 10,label: '三级 1-1-2',},],},],},{id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1',},{id: 6,label: '二级 2-2',},],},{id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1',},{id: 8,label: '二级 3-2',},],},],};},
};
</script>

使用文档

以下只列举主要属性与方法，更多具体的属性配置请移步element官网进行查看。

属性

属性名	类型	默认值	是否必传	说明
value / v-model	string / number	-	是	绑定值
props	object	与element保持一致	否	配置选项，具体配置可以参照element ui库中el-tree的配置
expand-first-level	boolean	true	否	当根节点只有一个时，是否展开
search-highlight	boolean	true	否	是否开启搜索高亮，仅在slot-tree未传入时生效
show-count	boolean	false	否	若节点中存在children，则在父节点展示所属children的数量，注意但设置插槽时 show-count将失效

事件

事件名称	说明	回调参数
change	当选择项发生改变时触发	共两个参数，依次为：当前节点的数据，当前节点的 Node 对象
onFilter	当过滤框输入的值改变时触发	共三个参数，依次为：搜索框的值，当前节点的数据，回调函数callback，接受一个参数类型boolean，表示是否展示该节点

插槽

name	说明
-	页面展示的输入框slot，如果传入默认插槽，则会不显示默认el-input，参数为 { value }
prepend	弹窗中过滤文本框的顶部插槽
tree	自定义树节点的内容，参数为 { node, data }