<template>
<!-- @tap="openTree=!openTree" -->
<div class="tree-select" :class="{'open-tree':openTree}" @tap.stop="openTree=true;">
<!-- clearable="false" -->
<el-input
placeholder="输入关键字进行过滤"
suffix-icon="openTree ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
v-model="filterText"
@input="searchNodeText"
>
<!-- @blur="openTree=false" @focus="openTree=true" -->
</el-input>
<i v-show="filterText" class="el-icon-close" @tap.stop="filterText=''"></i>
<!-- class="filter-tree" -->
<el-tree
data="data"
props="defaultProps"
default-expand-all
expand-on-click-node="false"
highlight-current="true"
filter-node-method="filterNode"
@node-click="nodeClick"
ref="tree">
</el-tree>
</div>
</template>
<script>
export default {
name:"TreeSelect",
// watch: {
// filterText(val) {
// this.$refs.tree.filter(val);
// }
// },
mounted() {
document.body.addEventListener('click', () => {
this.openTree = false;
}, false);
},
methods: {
searchNodeText(val) {
// console.log('###',val)
this.$refs.tree.filter(val);
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
nodeClick(e){
// console.log('@@@',e);
// @@@
// children: Array(1)
// id: 1
// label: "一级 1"
// text: "一级"
this.filterText = e.label
// console.log(this.filterText)
this.openTree = false
return;
}
},
data() {
return {
openTree:false,
filterText: '',
data: [
{
id: 1,
label: '一级 1',
// text:'一级',
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'
}]
},
],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
}
</script>
<style lang="scss" scope>
.tree-select{
position: relative;
cursor: pointer;
display: inline-block;
i{
position: absolute;
top: 0;
bottom: 0;
right: 27px;
margin: auto;
height: max-content;
}
.el-tree{
display: none;
width: 100%;
position: absolute;
right: 0;
overflow: auto;
background: #fff;
// box-shadow: 0 4px 8px 8px rgba(0,0,0,.26);
z-index: 99999;
border: 1px solid #1890ff;
border-top: none;
border-radius: 0 0 4px 4px;
min-height: 100px;
// min-height: max-content;
max-height: 300px;
font-weight: 700;
}
}
.open-tree{
// 样式 穿透
:v-deep .el-input__inner {
border-radius: 4px 4px 0 0 !important;
border: 1px solid #1890ff;
border-bottom: 1px solid #f4f4f5;
}
.el-tree{
display: block;
}
}
</style>
5 个回复
2***@qq.com (作者) - uniapp开发者
@input="searchNodeText"
>
<!-- @blur="openTree=false" @focus="openTree=true" -->
</el-input>
<i v-show="filterText" class="el-icon-close" @tap.stop="filterText=''"></i>
<!-- class="filter-tree" -->
<el-tree data="data" props="defaultProps" default-expand-all expand-on-click-node="false" highlight-current="true" filter-node-method="filterNode" @node-click="nodeClick"
ref="tree">
</el-tree>
</div>
</template>
<script>
export default {
name:"TreeSelect",
// watch: {
// filterText(val) {
// this.$refs.tree.filter(val);
// }
// },
mounted() {
document.body.addEventListener('click', () => {
this.openTree = false;
}, false);
},
methods: {
searchNodeText(val) {
// console.log('###',val)
this.$refs.tree.filter(val);
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
nodeClick(e){
// console.log('@@@',e);
// @@@
// children: Array(1)
// id: 1
// label: "一级 1"
// text: "一级"
this.filterText = e.label
// console.log(this.filterText)
this.openTree = false
return;
}
},
data() {
return {
openTree:false,
filterText: '',
data: [
{
id: 1,
label: '一级 1',
// text:'一级',
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'
}]
},
],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
}
</script>
<style lang="scss" scope>
} .open-tree{ // 样式 穿透 :v-deep .el-input__inner { border-radius: 4px 4px 0 0 !important;.tree-select{
position: relative;
cursor: pointer;
display: inline-block;
i{
position: absolute;
top: 0;
bottom: 0;
right: 27px;
margin: auto;
height: max-content;
}
.el-tree{
display: none;
width: 100%;
position: absolute;
right: 0;
overflow: auto;
background: #fff;
// box-shadow: 0 4px 8px 8px rgba(0,0,0,.26);
z-index: 99999;
border: 1px solid #1890ff;
border-top: none;
border-radius: 0 0 4px 4px;
min-height: 100px;
// min-height: max-content;
max-height: 300px;
font-weight: 700;
}
border: 1px solid #1890ff;
border-bottom: 1px solid #f4f4f5;
}
.el-tree{
display: block;
}
}
</style>
2***@qq.com (作者) - uniapp开发者
用 element-ui 的 tree 重新 写了个 组件
2***@qq.com (作者) - uniapp开发者
组件附件
2***@qq.com (作者) - uniapp开发者
组件附件
2***@qq.com (作者)
新加自定义节点
2022-05-28 09:41
小王瘦瘦
请问有解决嘛？