elmentui 树形结构实现单选

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

原创最新推荐文章于 2024-06-18 10:14:03 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

【前端】专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用Element UI中的ElTree组件实现树形结构的数据展示，并通过实例代码演示了如何处理节点点击事件以及如何设置选中状态。文章还探讨了如何在点击节点时更新选中状态，包括取消选中已选节点和重新选中特定节点。

<template>
    <el-tree
      :data="treeData"
      show-checkbox
      node-key="id"  
      :props="defaultProps"
      check-strictly
      @check-change="handleClick" 
      ref="treeForm">           
    </el-tree>
</template>

export default{
    data(){
        return {
            i:0,
        }
    },
    methods:{
        handleClick(data,checked, node) {
            this.i++;
            if(this.i%2===0){
                if(checked){
                    this.$refs.treeForm.setCheckedNodes([]);
                    this.$refs.treeForm.setCheckedNodes([data]);
                    //交叉点击节点
                }else{
                    this.$refs.treeForm.setCheckedNodes([]);
                    //点击已经选中的节点，置空
                }
            }
        },
    }}