element下拉树形选择框
封装子组件treeSelect
<template>
<el-select v-model="valueTitle"
placeholder="请选择"
:clearable="clearable"
@clear="clearHandle">
<el-option :value="valueTitle"
:label="valueTitle"
class="options">
<el-tree id="tree-option"
ref="selectTree"
:accordion="accordion"
:data="options"
:props="props"
:node-key="props.value"
:default-expanded-keys="defaultExpandedKey"
@node-click="handleNodeClick">
</el-tree>
</el-option>
</el-select>
</template>
<script>
export default {
name: "el-tree-select",
props: {
props: {
type: Object,
default: () => {
return {
value: 'value',
label: 'title',
children: 'children'
};
}
},
options: { type: Array, default: () => { return [] } },
value: { type: String, default: () => { return null } },
clearable: { type: Boolean, default: () => { return true } },
accordion: { type: Boolean, default: () => { return false } }
},
data () {
return {
valueId: null,
valueTitle: '',
defaultExpandedKey: []
}
},
mounted () {
this.valueId = this.value,
this.initHandle()
},
methods: {
initHandle () {
if (this.valueId) {
setTimeout(() => {
window.console.log(this.options)
this.valueTitle = this.$refs.selectTree.getNode(Number(this.valueId)).data[this.props.label]
this.$refs.selectTree.setCurrentKey(Number(this.valueId))
this.defaultExpandedKey = [this.valueId]
}, 500);
} else {
this.valueTitle = ""
}
this.initScroll()
},
initScroll () {
this.$nextTick(() => {
let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
scrollBar.forEach(ele => ele.style.width = 0)
})
},
handleNodeClick (node, obj) {
console.log(node, '1111111111111111111111111');
this.valueTitle = node[this.props.label]
this.valueId = node[this.props.value]
this.$emit('getValue', [this.valueId, this.valueTitle])
this.defaultExpandedKey = []
},
clearHandle () {
this.valueTitle = ''
this.valueId = null
this.defaultExpandedKey = []
this.clearSelected()
this.$emit('getValue', [this.valueId, this.valueTitle])
},
clearSelected () {
let allNode = document.querySelectorAll('#tree-option .el-tree-node')
allNode.forEach((element) => element.classList.remove('is-current'))
}
},
watch: {
value () {
this.valueId = this.value
this.initHandle()
}
},
}
</script>
<style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
height: auto;
max-height: 274px;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
ul li >>> .el-tree .el-tree-node__content {
height: auto;
padding: 0 20px;
}
.el-tree-node__label {
font-weight: normal;
}
.el-tree >>> .is-current .el-tree-node__label {
color: #409eff;
font-weight: 700;
}
.el-tree >>> .is-current .el-tree-node__children .el-tree-node__label {
color: #606266;
font-weight: normal;
}
</style>
html
父组件引用
<SelectTree placeholder="请选择归属组织"
style="width: 200px"
ref="deptTreeSelected"
:props="defaultProps"
:options="treeData"
:value="queryParams.deptId"
:clearable="true"
:accordion="true"
@getValue="getTreeSelected($event)" />
import SelectTree from "@/components/treeSelect";
treeData: [],
valueId: '',
defaultProps: {
id: 'id',
value: 'value',
children: 'children',
label: 'name'
},
getTreeselect () {
sysDeptApi.getOrgTree().then((res) => {
this.treeData = res.data
})
},
getTreeSelected (val) {
console.log('val-----', val);
this.queryParams.deptId = val[0]
},
javascript
运行
数据类型：
相关知识
vue树形选择器（树形下拉框）
jQuery MiniUI 开发教程 表单控件 TreeSelect：树形选择框（十三）
Element Plus
使用第三方图标库拓展Element UI的图标库
jQuery MiniUI 开发教程 树形控件 创建树：树形结构（一）
花卉设计元素(Floral Design Element)
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
揭秘精彩瞬间：探索秘密教学韩漫下拉式的无限魅力
vant 时间选择的用法
梨树如何进行树形选择
网址: element下拉树形选择框 https://m.huajiangbk.com/newsview2489511.html
| 上一篇: Element UI树形选择：T |
下一篇: 意外了！它竟被称为“年宵花最好的 |
