vue2 el-tree树形下拉框

由于element-vue2 中没有el-tree-select组件,所以树形下拉需要结合el-selet完成

<el-form-item label="上级部门:" prop="pidName">

<el-select

ref="select"

v-model="dialogForm.pidName"

placeholder="请选择上级部门"

clearable

>

<el-option style="height: auto;" :value="dialogForm.pidName">

<el-tree

:data="treeData"

:props="defaultProps"

:default-expand-all="true"

@node-click="handleNodeClick"

>

</el-tree>

</el-option>

</el-select>

</el-form-item>

treeData: [],

defaultProps: {

children: "children",

label: "name",

},

handleNodeClick(data) {

this.dialogForm.pidName = data.name; //点击渲染到选框里

this.departMentPid = data.id;

this.$refs.select.blur();

},

相关推荐
北辰alk1 小时前
Vue 模板引擎深度解析:基于 HTML 的声明式渲染
vue.js
北辰alk1 小时前
Vue 自定义指令完全指南:定义与应用场景详解
vue.js
北辰alk2 小时前
Vue 动态路由完全指南:定义与参数获取详解
vue.js
北辰alk2 小时前
Vue Router 完全指南:作用与组件详解
vue.js
北辰alk2 小时前
Vue 中使用 this 的完整指南与注意事项
vue.js
xkxnq2 小时前
第二阶段:Vue 组件化开发(第 16天)
前端·javascript·vue.js
北辰alk2 小时前
Vue 插槽(Slot)完全指南:组件内容分发的艺术
vue.js
北辰alk2 小时前
Vue 组件中访问根实例的完整指南
vue.js
Van_Moonlight2 小时前
RN for OpenHarmony 实战 TodoList 项目:空状态占位图
javascript·开源·harmonyos
北辰alk2 小时前
Vue Router 中获取路由参数的全面指南
vue.js