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();

},

相关推荐
quweiie3 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
闲蛋小超人笑嘻嘻3 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
巴博尔4 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城4 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
会写代码的饭桶5 小时前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins
被巨款砸中5 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略5 小时前
web vue之状态管理Pinia
前端·javascript·vue.js
董世昌415 小时前
js怎样改变元素的内容、属性、样式?
开发语言·javascript·ecmascript
mosen8685 小时前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
鸠摩智首席音效师6 小时前
如何清除 Yarn 缓存 ?
javascript