最近在做项目的过程中,用到下拉选择树的效果,主要用elementUI的
el-select与el-tree,直接上代码
<template>
<div class="box">
<el-select size="small" v-model="value" multiple placeholder="请选择" clearable @clear="selectClear" collapse-tags>
<el-option class="option-style" :value="selectTree">
<el-tree ref="tree" :data="list" :props="defaultProps"
node-key="id" show-checkbox @check-change="handleNodeClick">
<div slot-scope="{node, data}">
<span :class="[{'tree-click': treeClick==data.value}]">{{data.label}}</span>
</div>
</el-tree>
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
treeClick:null,
value:[],
selectTree:[],
}
},
props: {
list: {
type: Array,
default: () => []
},
defaultProps: {
type: Object,
default: () => {}
}
},
methods: {
handleNodeClick(data,self,child) {
console.log(this.$refs.tree.getCheckedNodes())
let datalist = this.$refs.tree.getCheckedNodes()
this.selectTree = [] //置空
this.value = []
datalist.forEach((item)=>{
this.selectTree.push({id:item.id,label:item.label})
this.value.push(item.label)
})
},
selectClear() {
this.value = [];
this.selectTree = [];
this.$refs.tree.setCheckedKeys([]);//清空树选中状态
},
},
}
</script>
<style scoped>
.box {
width: 100%;
height: 100%;
}
.option-style {
padding: 0;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
/deep/ .el-select .el-input--small .el-input__inner{
height: 28px;
line-height: 28px;
}
/deep/ .el-select .el-input--small .el-input__icon {
line-height: 28px;
}
</style>
应用:
<selectTree :defaultProps="defaultProps" :list="list"></selectTree>
js部分
<script>
import selectTree from './select-tree'
export default {
name: 'page1',
components: {
selectTree
},
data() {
return {
defaultProps:{
children: 'children',
label: 'label'
},
list: [{
id: 1,
label: '一级 2',
children: [{
id: 3,
label: '二级 2-1',
children: [{
id: 4,
label: '三级 3-1-1'
}, {
id: 5,
label: '三级 3-1-2',
}]
}, {
id: 2,
label: '二级 2-2',
children: [{
id: 6,
label: '三级 3-2-1'
}, {
id: 7,
label: '三级 3-2-2',
}]
}]
}],
}
},
methods: {}
}
</script>