使用element-ui的el-tree组件入坑讲解之setCheckedKeys

最新推荐文章于 2024-07-30 17:32:18 发布

weixin_33743703

最新推荐文章于 2024-07-30 17:32:18 发布

阅读量5.5w

点赞数 8

文章标签： javascript ui 前端 ViewUI

原文链接：https://juejin.im/post/5bffda6c5188254caf186ebf

版权

这篇博客介绍了在使用element-ui的el-tree组件时遇到的问题及解决方法，包括如何设置节点状态依据，处理父节点全选与子节点部分选中的情况，以及在组件封装中如何正确调用setCheckedKeys方法。作者强调了node-key、$nextTick和checkedNodes等关键概念，并鼓励读者分享更多场景下的解决方案。

摘要由CSDN通过智能技术生成

1、前提基础

掌握vue、element-ui相关前端知识，若有还没掌握的童鞋可以先去看我的vue全家桶一文：juejin.im/post/5bfe4a…。

2、业务场景描述

假设现在我们有一个人员列表，需要给每个人配置特定的权限来限制哪些人可以干些什么：

3、代码

新建AuthTree.vue页面：

<template>
  <div class="auth_tree">
    <el-table
      :data="listData"
      border
      style="width: 100%;">
      <el-table-column label="ID" prop="id">  
      </el-table-column>
      <el-table-column label="姓名" prop="name">  
      </el-table-column>
      <el-table-column label="性别" prop="sex">  
      </el-table-column>
      <el-table-column label="权限配置">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="opetation(scope.row.auth)">配置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisible"
      title="配置权限"
      center
      width="600px"
      @close="closeDialog">
      <div class="dialog_main_content">
        <el-tree
          ref=