vue 树形结构

最新推荐文章于 2025-06-12 18:03:36 发布

原创最新推荐文章于 2025-06-12 18:03:36 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Vue中创建和操作树形结构，包括HTML布局、数据定义以及使用methods进行动态操作的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html

触发
 <el-button size="small" type="success" @click="handlecaidan(scope.row.id)">分配菜单</el-button>
    <!-- 分配菜单 -->
    <el-dialog title="分配菜单" :visible.sync="handlecaidanis" width="40%">
      <!-- 树 -->
      <el-tree
        :data="treedata" //展示数据
        :props="defaultProps"//配置选项
        show-checkbox//节点是否可被选择
        node-key="id"//每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
         ref="tree"
          default-expand-all//	是否默认展开所有节点
        :default-checked-keys="defKeys"//默认勾选的节点的 key 的数组
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="treerome">取 消</el-button>
        <el-button type="primary" @click="addfrom">确 定</el-button>
      </span>
    </el-dialog>

2.data中定义

  handlecaidanis: false, //分配菜单
    // 树形数据
      treedata:[],
      id:'',//树形图确让修改的ID
      menustr:"",
      defKeys:[],
      defaultProps: {
        children: "children",
        label: "title"
      }

3.methods

 //  点击分配权限
    handlecaidan(id) {
      this.id = id
      fetchListtree().then(response => {
        this.treedata = []
        for (var item in response.data) {
          this.treedata.push(response.data[item])
        }
      });
      treelistdata(id).then(response => {
      this.defKeys = response.data
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(this.defKeys)
        })
            this.handlecaidanis = true;
      })
    },
    // 分配取消
    treerome(){
    this.handlecaidanis = false
    this.$refs.tree.setCheckedKeys([]);
    },
    //分配确定
    addfrom(id){
      console.log(id);
      //选中的内容
       let checkedNodes = this.$refs.tree.getCheckedNodes();
        let checkedMenuIds=new Set();
         if(checkedNodes!=null&&checkedNodes.length>0){
          for(let i=0;i<checkedNodes.length;i++){
            let checkedNode = checkedNodes[i];
            checkedMenuIds.add(checkedNode.id);
          }
        }
          console.log(checkedMenuIds);
          this.menustr = JSON.stringify(checkedMenuIds)
          var data = {
            menustr:this.menustr
          }
          id = this.id
          console.log(data,id);
         fetchListWithtree(data,id).then(response => {
             this.$message({
          message: response.errmsg,
          type: "success",
          duration: 1000
        });
         })
    this.handlecaidanis = false
   this.$refs.tree.setCheckedKeys([]);
    },