700字范文 > Element树型下拉框/vue2树型下拉框/TreeSelect/树型下拉

Element树型下拉框/vue2树型下拉框/TreeSelect/树型下拉

时间：2020-10-16 23:38:05

前言

今天小谭要给大家分享的是基于element ui 的下拉框和树型控件二次分装的树型下拉框，element plus新增了这一组件，但是对于还在使用vue2的我来说，就很不友好。组件可以实现单选和多选，以及其他常用功能，废话不多说，直接上效果图：

代码实现

效果图如上，接下来实现代码：

使用时，如果想实现回显效果node-key必须要传！！！

HTMl：

<template><el-select:value="value":placeholder="$attrs['placeholder']":multiple="$attrs['show-checkbox']":disabled="$attrs['disabled']":clearable="$attrs['show-checkbox']==undefined?$attrs['clearable']:false":collapse-tags="$attrs['collapse-tags']"@change="selectChange"@clear="selectClear"ref="mySelect"><template slot="empty"><div class="selecTree"><el-tree:data="data":props="props"@node-click="handleNodeClick":show-checkbox="$attrs['show-checkbox']":check-strictly="$attrs['check-strictly']":icon-class="$attrs['icon-class']":lazy="$attrs['lazy']":load="$attrs['load']":node-key="$attrs['node-key']"@check-change="handleCheckChange":default-expanded-keys="defaultExpandedKeys"ref="myTree"><template slot-scope="{ node, data }"><slot :node="node" :data="data"><span class="slotSpan"><span>{{ data[props.label||'label'] }}<bv-if="$attrs['show-count']!=undefined&&data[props.children || 'children']">（{{data[props.children || 'children'].length}}）</b></span></span></slot></template></el-tree></div></template></el-select></template>

JS：

export default {props: {value: {type: undefined,default: null,},data: {type: Array,default: null,},props: {type: Object,default: null,},},data() {return {defaultExpandedKeys: [],};},mounted() {setTimeout(this.initData, 2000);},beforeUpdate() {this.initData();},methods: {initData() {if (this.$attrs['show-checkbox'] === undefined) {let newItem = this.recurrenceQuery(this.data, this.props.label, this.value);if (newItem.length) {if (this.$attrs['node-key'] && newItem[0][this.$attrs['node-key']]) {this.defaultExpandedKeys = [newItem[0][this.$attrs['node-key']]];}this.$refs.myTree.setCurrentNode(newItem[0]);}} else {let newValue = JSON.parse(JSON.stringify(this.value));if (!(newValue instanceof Array)) {newValue = [newValue];}if (newValue[0]) {let checkList = newValue.map(key => {if (key) {let newItem = this.recurrenceQuery(this.data, this.props.label, key);return newItem[0] || '';}});if (checkList[0]) {if (this.$attrs['node-key']) {let defaultExpandedKeys = checkList.map(item => item[this.$attrs['node-key'] || '']);if (defaultExpandedKeys.length) this.defaultExpandedKeys = defaultExpandedKeys;}this.$refs.myTree.setCheckedNodes(checkList);}}}},// 多选handleCheckChange(data, e, ev) {let checkList = this.$refs.myTree.getCheckedNodes();let setList = null;if (checkList.length) {setList = checkList.map(item => item[this.props.label]);}this.$emit('input', setList);// 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点this.$emit('change', data, e, ev);},// 单选事件handleNodeClick(data, e) {if (!(this.$attrs['select-last-node'] === undefined)) {if (data[this.props.children || 'children'] && data[this.props.children || 'children'][0]) {return false;}}if (this.$attrs['show-checkbox'] === undefined) {this.$emit('input', data[this.props.label]);this.$refs.mySelect.blur();}this.$emit('change', data, e);},// 递归查找通用方法recurrenceQuery(list, key, value) {if (!list || !key || !value) return [];let queryData = [];list.map(item => {if (item[this.props.children || 'children'] && item[this.props.children || 'children'].length) {queryData.push(...this.recurrenceQuery(item[this.props.children || 'children'], key, value));}if (item[key] == value) {queryData.push(item);}return item;});return queryData;},selectChange(e) {if (this.$attrs['show-checkbox'] !== undefined) {let checkList = e.map(key => {let newItem = this.recurrenceQuery(this.data, this.props.label, key);return newItem[0] || '';});this.$refs.myTree.setCheckedNodes(checkList);this.$emit('input', e);}},selectClear() {this.$emit('input', null);},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;},},};

CSS：

.selecTree {max-height: 50vh;overflow: auto;padding: 5px;}.el-select {width: 100%;}.slotSpan {font-size: 14px;b {font-weight: normal;font-size: 12px;color: #999;}}.selecTree ::v-deep .el-tree-node__content {font-size: 14px;}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。