标签：function el val width 树形 treeShowFlag select icon
下拉列表改成树形结构，点击哪个节点，就选中哪个节点，效果如图：
代码：
<el-select
v-model="name"
placeholder="请选择"
clearable
@clear="handleClear"
>
<el-option :value="list" class="select-tree">
<el-tree
:data="list"
highlight-current
check-on-click-node
default-expand-all
:props="{
label: 'name',
children: 'childList'
}"
@node-click="handleCheck"
/>
</el-option>
</el-select>export default {
data() {
return {
name: '',
code: ''
list: [],
}
},
methods: {
// 点击节点
handleCheck: function(val) {
this.name = val.name
this.code = val.code
},
// 清空
handleClear: function(val) {
if (!val || val === '') {
this.code = ''
}
},
}
}.select-tree {
height: auto;
max-height: 200px;
overflow-y: auto;
background-color: white;
padding: 0;
}----------------------------------------------------------分割线--------------------------------------------------------
新功能：模糊查询
以上部分是我的第一个版本，支持下拉显示树形列表；后来测试提了个新需求，要求可以输入模糊查询，经过一番探索，参考了一些文章之后，完成了以下的效果~看起来跟原本的el-select没什么两样，可是没有用到el-select哦~
下面贴上全部代码
子组件SelectTree.vue：
<template>
<div v-clickoutside="handleClickOutside" class="select-tree">
<el-input
v-model="selectParam"
class="select-param-input"
placeholder="请选择机构"
@click.native="handleInput"
@input="filterInput"
@mouseenter.native="paramInputHover"
@mouseleave.native="paramInputOut"
>
<i slot="suffix" class="el-input__icon" :class="icon" @click="iconClick(icon)" />
</el-input>
<div v-show="treeShowFlag" style="position:absolute;z-index: 3333;">
<div class="triangle"><span /></div>
<div class="drop-down-div">
<el-tree
ref="tree"
:data="data"
:props="defaultProps"
:filter-node-method="filterNode"
highlight-current
class="drop-down-tree"
@node-click="nodeClick"
/>
</div>
</div>
</div>
</template>
<script>
// clickoutside自定义指令，当鼠标点击指令绑定元素的外部时会触发该方法。
import Clickoutside from 'element-ui/src/utils/clickoutside'
export default {
directives: { Clickoutside }, // 声明指令
props: {
data: {
default: () => [],
type: [Array, Object]
},
// value监听的是父组件的v-model
value: {
default: '',
type: String
}
},
data() {
return {
treeShowFlag: false,
defaultProps: {
children: 'childDeptList',
label: 'deptName'
},
selectParam: '',
icon: 'el-icon-arrow-down'
}
},
watch: {
treeShowFlag(val) {
this.icon = val ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
},
value(val) {
this.selectParam = val
}
},
methods: {
// 点击外部区域收起下拉框
handleClickOutside() {
this.treeShowFlag = false
},
// 点击输入框展开/收起下拉框
handleInput() {
this.treeShowFlag = !this.treeShowFlag
},
// 输入文字进行模糊查询
filterInput: function(val) {
this.treeShowFlag = true
this.$refs.tree.filter(val)
},
// 鼠标悬浮，如果由内容的话就显示清除图标
paramInputHover: function() {
if (this.selectParam !== '') {
this.icon = 'el-icon-circle-close'
}
},
// 鼠标由悬浮离开，如果图标显示的是清除的话，就换成原来的图标
paramInputOut: function() {
if (this.icon === 'el-icon-circle-close') {
this.icon = this.treeShowFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
}
},
// 点击清除图标时清除输入框的内容
iconClick: function(icon) {
if (icon === 'el-icon-circle-close') {
this.treeShowFlag = false // 由于此事件会同时触发handleInput(),所以将treeShowFlag设为false，防止出现下拉列表
this.selectParam = ''
this.filterInput(this.selectParam) // 内容清除后显示所有数据
this.$emit('change', {})
}
},
// 节点过滤（模糊查询）
filterNode(value, data) {
if (!value) return true
return data.deptName.indexOf(value) !== -1
},
// 树形节点点击事件
nodeClick: function(val) {
this.$emit('change', val)
}
}
}
</script>
<style lang="scss" scoped>
.select-tree {
width:100%;
display:inline-block;
transition: 0.5s;
.select-param-input {
width: 100%;
cursor: pointer;
}
}
.drop-down-div {
border-radius: 3px;
max-height: 200px;
min-width: 200px;
padding: 10px;
background-color: #fff;
display: flex;
flex-direction: column;
box-shadow: 1px 2px 8px 1px rgba(0, 0, 0, 0.2);
}
.drop-down-div .drop-down-tree {
overflow: auto;
}
.triangle {
width:0;
height:0;
border-width:0 8px 7px;
border-style:solid;
border-color:transparent transparent rgb(220, 223, 230);
margin-left: 60px;
margin-top: 3px;
position:relative;
}
.triangle span{
display:block;
width:0;
height:0;
border-width:0 7px 6px;
border-style:solid;
border-color:transparent transparent rgb(255, 255, 255);
position:absolute;
top:1px;
left:-7px;
}
</style>
父组件：
deptList为后台获取的树形列表；通过change事件接收选中的节点
<select-tree v-model="deptName" :data="deptList" class="query-select" @change="deptChange" />
deptChange: function(val) {
this.deptName = val.deptName
}参考博客：
https://blog.csdn.net/weixin_39755186/article/details/102921743
https://blog.csdn.net/Candy_mi/article/details/91551770
标签：function,el,val,width,树形,treeShowFlag,select,icon 来源： https://blog.csdn.net/qq_42345108/article/details/112274097
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。