标准类别下拉树
This commit is contained in:
zyn
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<el-form-item :label="label" class="search-item">
|
||||
<el-select :ref="refName" v-model="value" :placeholder="placeholder" style="width: 100%" fixed>
|
||||
<ElInput
|
||||
v-if="treeList.length !== 0"
|
||||
v-model="filterText"
|
||||
placeholder="输入关键字搜索"
|
||||
class="sel-input"
|
||||
@click.stop.native
|
||||
/>
|
||||
<el-option :value="value" :label="checkLabel" class="sel-option">
|
||||
<el-tree
|
||||
class="tree-line"
|
||||
ref="selectTree"
|
||||
:data="treeList"
|
||||
:props="defaultProps"
|
||||
icon-class="icon-tree"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
@node-click="nodeClick"
|
||||
:filter-node-method="filterNode">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
|
||||
<span style="font-size:12px"> {{ node.label }} </span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
filterText: '', // 筛选
|
||||
checkLabel: '', // 回显值
|
||||
}
|
||||
},
|
||||
props:{
|
||||
label:{
|
||||
type: String
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default(){
|
||||
return '请选择'
|
||||
}
|
||||
},
|
||||
// 树
|
||||
treeList:{
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
// 绑定的值 -> id
|
||||
value:{
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
defaultProps:{
|
||||
type: Object,
|
||||
default(){
|
||||
return {
|
||||
children: 'children',
|
||||
label: 'menuName'
|
||||
}
|
||||
}
|
||||
},
|
||||
refName:{
|
||||
type: String,
|
||||
default() {
|
||||
return 'selectRefs'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText (val) {
|
||||
this.$refs[this.refName].filter(val);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
nodeClick(node){
|
||||
this.$emit('input',node.id) // 父子v-model的input事件
|
||||
this.checkLabel = node.menuName
|
||||
},
|
||||
filterNode (value, data) {
|
||||
if (!value) return true;
|
||||
return data.menuName.indexOf(value) !== -1;
|
||||
},
|
||||
// 父组件通过ref调用该方法
|
||||
clear(){
|
||||
// 清空值
|
||||
this.$emit('input', '')
|
||||
this.checkLabel = ''
|
||||
this.filterText = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
/deep/ .icon-tree {
|
||||
margin: 0 5px 0 10px;
|
||||
position: relative;
|
||||
background: url('~@/assets/images/shangqi/img/tree-add.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/ .expanded {
|
||||
background: url('~@/assets/images/shangqi/img/tree-sub.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/ .is-leaf {
|
||||
background-image: none;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/ .is-show {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: url('~@/assets/images/shangqi/img/tree.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/ .is-leaf-none {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: url('~@/assets/images/shangqi/img/none-file-new.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/deep/ .tree-line {
|
||||
.el-tree-node {
|
||||
position: relative;
|
||||
padding-left: 0px; // 缩进量
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.el-tree-node__content{
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.el-tree-node__children {
|
||||
padding-left: 16px; // 缩进量
|
||||
}
|
||||
|
||||
// 竖线
|
||||
.el-tree-node::before {
|
||||
content: "";
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: -26px;
|
||||
border-width: 1px;
|
||||
border-left: 1px dashed #858990e0;
|
||||
}
|
||||
|
||||
// 当前层最后一个节点的竖线高度固定
|
||||
.el-tree-node:last-child::before {
|
||||
height: 38px; // 可以自己调节到合适数值
|
||||
}
|
||||
|
||||
// 横线
|
||||
.el-tree-node::after {
|
||||
content: "";
|
||||
width: 11px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: -3px;
|
||||
top: 12px;
|
||||
border-width: 1px;
|
||||
border-top: 1px dashed #858990e0;
|
||||
}
|
||||
|
||||
// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
|
||||
& > .el-tree-node::after {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
& > .el-tree-node::before {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
// 展开关闭的icon
|
||||
.el-tree-node__expand-icon {
|
||||
font-size: 16px;
|
||||
// 叶子节点（无子节点）
|
||||
&.is-leaf {
|
||||
color: transparent;
|
||||
// display: none; // 也可以去掉
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sel-input {
|
||||
width: 96%;
|
||||
margin: 5px;
|
||||
height: 30px;
|
||||
/deep/ .el-input__inner{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.sel-option {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: normal!important;
|
||||
padding: 0 5px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user