element-ui组件el-tree实现单选

最新推荐文章于 2024-06-18 10:14:03 发布

转载最新推荐文章于 2024-06-18 10:14:03 发布 · 2k 阅读

文章标签：

#vue #element-ui

element 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了 Element UI 中树形组件的配置及使用方法。通过具体实例展示了如何设置树形节点的属性，包括加载懒惰节点、实现复选框功能、监听节点点击事件等，帮助开发者更好地掌握 Element UI 的树形组件。

转自：http://www.pianshen.com/article/3665136583/

<template>
    	<div>
    		<el-tree
    	                  :props="defaultProps"
    	                  :load="loadNode"
    	                  lazy
    	                  ref="tree"
    	                  show-checkbox
    	                  node-key="comcode"  // 看项目和数据而定，有的为id
    	                  :check-strictly="true"
    	                  @check-change="handleClick"
    	                  @node-click="nodeClick"
    	                  >
    	     </el-tree>
    	</div>
    </template>
    <script>
   methods:{
    	handleClick(data, checked, node){
               if(checked == true){
                      this.checkedId = data.comcode;
                      this.$refs.tree.setCheckedNodes([data]);
                }
       },
       nodeClick(data,checked,node){
             this.checkedId = data.comcode
             this.$refs.tree.setCheckedNodes([data]);
        }
   }
    </script>