placeholder
=
"
此处键入
'
关键词
'
搜索查询
"
prefix-icon
=
"
el-icon-search
"
v-model
=
"
treeFilter
"
size
=
"
mini
"
clearable
>
</
el-input
>
// 设置一个隐藏的下拉选项，选项显示的是汉字label，值是value
// 如果不设置一个下拉选项，下面的树形组件将无法正常使用
<
el-option
hidden
key
=
"
id
"
:value
=
"
selectVal
"
:label
=
"
selectName
"
>
</
el-option
>
// 设置树形控件
<
el-tree
:data
=
"
treeData
"
:props
=
"
defaultProps
"
@node-click
=
"
handleNodeClick
"
:expand-on-click-node
=
"
false
"
:check-on-click-node
=
"
true
"
ref
=
"
tree
"
node-key
=
"
id
"
:default-expand-all
=
"
true
"
:filter-node-method
=
"
filterNode
"
// @node-click：树形控件选项点击事件
// :expand-on-click-node：使树形控件只有点箭头图标的时候才会展开或者收缩节点，为false则点文字直接选中该项
// :check-on-click-node：是否在点击节点的时候选中节点，当选项为复选框时有用，这个属性可以删除
// :default-expand-all：默认展开所有节点
// :filter-node-method：实现搜索功能的筛选方法
<
span
slot-scope
=
"
{ data }
"
>
//选项用插槽来显示，匹配搜索功能，并方便增加tag标签需求
<
span
>
{
{ data.label }}
</
span
>
<
el-tag
size
=
"
mini
"
style
="
margin
:
0 10px
"
v-show
=
"
filterorgType(data.tag)
"
>
{
{ filterorgType(data.tag) }}
</
el-tag
</
span
>
</
el-tree
>
</
el-select
>
</
div
>
</
template
>
<
script
>
export
default
{
name
:
"el-select-tree"
,
data
(
)
{
return
{
selectVal
:
""
,
selectName
:
""
,
treeFilter
:
""
,
treeData
:
[
value
:
"1"
,
label
:
"一级 1菈妮"
,
tag
:
"wife"
,
children
:
[
value
:
"1-1"
,
label
:
"二级 1-1"
,
children
:
[
value
:
"1-1-1"
,
label
:
"三级 1-1-1"
,
label
:
"一级 2"
,
value
:
"2"
,
children
:
[
value
:
"2-1"
,
label
:
"二级 2-1"
,
children
:
[
value
:
"2-1-1"
,
label
:
"三级 2-1-1"
,
value
:
"2-2"
,
label
:
"二级 2-2"
,
children
:
[
value
:
"2-2-1"
,
label
:
"三级 2-2-1鸡腿"
,
tag
:
"princess"
,
value
:
"3"
,
label
:
"一级 3"
,
children
:
[
value
:
"3-1"
,
label
:
"二级 3-1"
,
children
:
[
value
:
"3-1-1"
,
label
:
"三级 3-1-1"
,
value
:
"3-2"
,
label
:
"二级 3-2艾尔登法环"
,
tag
:
"yyds"
,
children
:
[
value
:
"3-2-1"
,
label
:
"三级 3-2-1"
,
defaultProps
:
{
children
:
"children"
,
label
:
"name"
,
tagList
:
[
{
value
:
"wife"
,
label
:
"老婆"
}
,
{
value
:
"princess"
,
label
:
"小公主"
}
,
{
value
:
"yyds"
,
label
:
"天下第一"
}
,
watch
:
{
treeFilter
(
val
)
{
this
.
$refs
.
tree
.
filter
(
val
)
;
methods
:
{
handleNodeClick
(
data
)
{
this
.
selectVal
=
data
.
value
;
this
.
selectName
=
data
.
label
;
this
.
treeFilter
=
""
;
this
.
$refs
.
select
.
blur
(
)
;
filterNode
(
value
,
data
)
{
if
(
!
value
)
return
true
;
let
filterRes
=
data
.
label
.
indexOf
(
value
)
!==
-
1
;
return
filterRes
;
filterorgType
(
val
)
{
let
arr
=
this
.
tagList
.
filter
(
(
item
)
=>
{
return
item
.
value
==
val
;
}
)
;
return
arr
.
length
?
arr
[
0
]
.
label
:
""
;
mounted
(
)
{
}
,
</
script
>
<
style
scoped
>
.input
{
width
:
260px
;
margin
:
10px
;
</
style
>
等有空了再更新一下复选多选功能吧
若有帮到您请给我点赞三连当作鼓励~
THX~
npm install --save
el
-
select
-
tree
需要
el
ement-ui
如果您的项目不使用
el
ement-ui，则需要引入一个单独的
el
ement-ui包，如下所示：
import '
el
-
select
-
tree
/lib/
el
ement-ui' ;
import
Vue
from '
vue
' ;
import
El
Select
Tree
from '
el
-
select
-
tree
' ;
Vue
. use (
El
Select
Tree
) ;
组件内注册
import
El
Select
Tree
from '
el
-
select
-
tree
' ;
export default {
components : {
El
Select
Tree
输入过滤框
以CSS样式为主，也会涉及到
Vue
组件和
el
ement组件的使用。
对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到
树形
组件了。
使用
Vue
+
El
ement UI，构建出最基本的
树
如下图所示：
现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。
下拉
菜单
将
下拉
菜单
嵌到
树
节点中，使操作更加简便、紧凑。
效果
演示
效果
如图：
图示1：悬浮在
树
节点状态
图示2：点击三个点图标状态
图示3： 选中并选择
菜单
如上，当鼠标悬浮在
树
节点上时，出现竖着的三个小
基于SpringBoot +
Vue
+
ElementUI
实现
人力资源管理系统基于SpringBoot +
Vue
+
ElementUI
实现
人力资源管理系统基于SpringBoot +
Vue
+
ElementUI
实现
人力资源管理系统基于SpringBoot +
Vue
+
ElementUI
实现
人力资源管理系统基于SpringBoot +
Vue
+
ElementUI
实现
人力资源管理系统基于SpringBoot +
Vue
+
ElementUI
实现
人力资源管理系统基于SpringBoot +
Vue
+
ElementUI
实现
人力资源管理系统基于SpringBoot +
Vue
+
ElementUI
实现
人力资源管理系统基于SpringBoot +
Vue
+
ElementUI
实现
人力资源管理系统基于SpringBoot +
Vue
+
ElementUI
实现
人力资源管理系统基于SpringBoot +
Vue
+
ElementUI
实现
人力资源管理系统基于SpringBoot +
Vue
+
ElementUI
实现
人力资源管理系统基于Spring
在使用
ElementUI
的
el
-
select
选择器时，如果绑定的值为对象，你需要在使用 v-mod
el
指令绑定数据时，同时设置 :value 和 v-mod
el
指令。其中 :value 指令用于指定选项中值的对应关系，v-mod
el
指令用于指定当前选中项的值。
例如，如果你的选项数组为 options，值为 { id: 1, name: 'Option 1' }，那么你可以这样设置：
<
el
-
select
v-mod
el
="
select
edOption" :value="'id'" placeholder="请选择">
<
el
-option v-for="option in options" :key="option.id" :lab
el
="option.name" :value="option"></
el
-option>
</
el
-
select
>
这样选中的option 就是个对象。而不是对象的 id。
