<el-form-item label="所属分类">
<el-select
v-model="selectTreeText"
placeholder="请选择"
:popper-append-to-body="false"
class="select-tree"
style="width:250px"
@change="selectChange"
>
<el-option style="height: auto;">
<!-- option展开高度太小,把height设置为auto就好啦 -->
<el-tree
ref="tree"
:data="treeData"
node-key="id"
accordion
highlight-current
:props="defaultProps"
icon-class="el-icon-arrow-down"
@node-click="nodeclick"
/>
</el-option>
</el-select>
return {
selectTreeText: '',
treeData: [],
defaultProps: {
children: 'children',
label: 'title'
},
temp: {
id: '',
name: '',
courseTypeID: '',
sortNumber: '1',
remarks: ''
},
}
getSortClass: function(key) {
const sort = this.listQuery.sort
return sort === `+${key}` ? 'ascending' : 'descending'
},
// 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) // 设置勾选的值
},
nodeclick(data) {
this.temp.courseTypeID = data.id
this.selectTreeText = data.title
},
<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>