elementui之el-select和el-tree的合并使用
elementui之el-select和el-tree的合并使用
效果图如下:
<template>
<div class="content-box">
<div class="container">
<el-select
v-model="selectTree"
placeholder="请选择"
:popper-append-to-body="false"
multiple
@change="selectChange"
class="select-tree"
style="width:500px"
>
<el-option :value="selectTreeValue" style="height: auto;">
<!-- option展开高度太小,把height设置为auto就好啦 -->
<el-tree
:data="data"
show-checkbox
node-key="id"
ref="tree"
accordion
highlight-current
:props="defaultProps"
icon-class="el-icon-arrow-down"
@check-change="handleCheckChange"
></el-tree>
</el-option>
</el-select>
<el-button @click="setCheckedKeys">设置</el-button>
{{ selectTree }}
{{ selectTreeValue }}
</div>
</div>
</template>
<script>
export default {
name: 'record',
components: {
SelectTree
},
data() {
return {
selectTree: '',
selectTreeValue: [],
data: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '一级 1-1'
}
]
},
{
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',
children: [
{
id: 81,
label: '三级 3-2-1'
},
{
id: 82,
label: '三级 3-2-2'
}
]
}
]
},
{
id: 4,
label: '四级 1',
children: []
},
],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
computed: {
},
created() {},
activated() {
},
methods: {
//select框值改变时候触发的事件
selectChange(e) {
var arrNew = []
var dataLength = this.selectTreeValue.length
var eleng = e.length
for (let i = 0; i < dataLength; i++) {
for (let j = 0; j < eleng; j++) {
if (e[j] === this.selectTreeValue[i].label) {
arrNew.push(this.selectTreeValue[i])
}
}
}
this.$refs.tree.setCheckedNodes(arrNew) //设置勾选的值
},
handleCheckChange() {
let res = this.$refs.tree.getCheckedNodes(true, true) //这里两个true,1. 是否只是叶子节点 2. 是否包含半选节点(就是使得选择的时候不包含父节点)
let arrLabel = []
let arr = []
res.forEach(item => {
arrLabel.push(item.label)
arr.push(item)
})
this.selectTreeValue = arr
this.selectTree = arrLabel
console.log('arr:' + JSON.stringify(arr))
console.log('arrLabel:' + arrLabel)
},
// 设置默认选中的tree回显
setCheckedKeys() {
this.$refs.tree.setCheckedKeys([7, 81, 82])
}
},
mounted() {}
}
</script>
<style lang="scss">
.select-drop-down {
position: relative;
}
.select-tree {
.el-select-dropdown__item {
padding: 0 10px;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background: transparent;
}
.el-tree-node__content {
position: relative;
// padding: 0 10px !important;
// background-color: #f0f0fd;
}
// .el-tree-node__children {
// padding-left: 16px;
// background: #ccc !important;
// }
.expanded.el-tree-node__expand-icon.el-icon-arrow-down {
position: absolute;
top: 0;
right: 0;
}
.el-tree-node__expand-icon {
position: absolute;
top: 0;
right: 0;
}
.el-tree-node__expand-icon.expanded{
transform: rotate(-180deg);
}
// .el-tree-node {
// padding: 0 10px;
// }
}
</style>