【Element】Tree 树形控件

最新推荐文章于 2025-09-24 12:41:09 发布

原创最新推荐文章于 2025-09-24 12:41:09 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

该代码示例展示了如何在Vue.js应用中利用el-tree组件创建一个可单选的下拉框，用于选择部门。handleNodeClick方法处理节点点击事件，更新部门名称和ID，而handleTreeClear方法则负责清除选择。部门数据存储在bmlist数组中。

使用el-tree完成下拉框单选功能
在这里插入图片描述

<label class="handle-label">部门:</label>
<el-select v-model="bm"  ref="selectTree" class="wd150" placeholder="请选择" clearable @clear="handleTreeClear">
     <el-option :value="bmId" :label="bm"
                style="width: 450px;height: 200px;overflow: auto;background-color: #fff;">
        <el-tree :data="bmlist" node-key="deptId" highlight-current 
                  :props="{value: 'deptId',label: 'fullName', children: 'childTreeList',}"
                   @node-click="handleNodeClick"
                   :current-node-key="bm" 
           ></el-tree>
      </el-option>
</el-select>

export default {
    data() {
        return {
            bm:"",//部门默认值
            bmId:"",
            bmlist:[],//部门列表
        };
    },
    created() {
        this.getBmList();
    },
    methods: {
        //tree节点点击事件
        handleNodeClick(node) {
            this.bm = node.fullName;
            this.bmId = node.deptId;
            this.$refs.selectTree.blur();
            this.search();
        },
        //部门select清空
        handleTreeClear(){
            // 将选择器的值置空
            this.bm = '';
            this.bmId = '';
            this.search();
        },
    }
}