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

},

相关推荐
谢尔登15 小时前
defineProperty如何弥补数组响应式不足的缺陷
前端·javascript·vue.js
涔溪16 小时前
实现将 Vue2 子应用通过无界(Wujie)微前端框架接入到 Vue3 主应用中(即 Vue3 主应用集成 Vue2 子应用)
vue.js·微前端·wujie
T***u33316 小时前
前端框架在性能优化中的实践
javascript·vue.js·前端框架
jingling55517 小时前
vue | 在 Vue 3 项目中集成高德地图(AMap)
前端·javascript·vue.js
油丶酸萝卜别吃17 小时前
Vue3 中如何在 setup 语法糖下,通过 Layer 弹窗组件弹出自定义 Vue 组件?
前端·vue.js·arcgis
J***Q2921 天前
Vue数据可视化
前端·vue.js·信息可视化
JIngJaneIL1 天前
社区互助|社区交易|基于springboot+vue的社区互助交易系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·社区互助
ttod_qzstudio1 天前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
芳草萋萋鹦鹉洲哦1 天前
【elemen/js】阻塞UI线程导致的开关卡顿如何优化
开发语言·javascript·ui
1***s6321 天前
Vue图像处理开发
javascript·vue.js·ecmascript