vue 树形结构

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>
      <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 {
             this.$message({
          message: response.errmsg,
          type: "success",
          duration: 1000
        });
         })
    this.handlecaidanis = false
   this.$refs.tree.setCheckedKeys([]);
    },