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

1、前提基础

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

2、业务场景描述

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

3、代码

1. 新建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=