HTML <el-select ref="stlectTree" v-model="treeSelectText" placeholder="请选择" size="small" > <el-option :value="treeValue.id" :label="treeValue.label" style="height: auto; padding: 0" > <el-tree class="ctims-treebox" style="font-weight: 400" :data="options" :props="defaultProps" default-expand-all node-key="codeId" :expand-on-click-node="false" highlight-current @node-click="nodeClick" ref="tree" /> </el-option> </el-select>
data数据 options: [ { id: "1", label: "测试", children: [ { id: "2", label: "测试一", }, { id: "3", label: "测试二", }, { id: "4", label: "测试三", }, ], }, ], treeSelectText: "", treeValue: {}, defaultProps: { children: "children", label: "label", },
树状节点点击事件 nodeClick(item) { const { id, label } = item; this.treeValue.id = id; this.treeValue.label = label; this.treeSelectText = label; this.$refs.stlectTree.blur(); },
效果
标签:el,vue,树状,tree,id,treeValue,label,children From: https://www.cnblogs.com/wcq520/p/17158822.html