SoFunction
Updated on 2025-04-10

Detailed explanation of vue-element Tree Tree controls to fill the pits

Set the default selected node through the default-checked-keys property of the tree tree control

<el-form-item label="Role Permissions:">
 <el-tree :data="data2" 
  show-checkbox 
  node-key="id" 
  @check="handleNodeClick" 
  :default-expanded-keys="[]" 
  ref="tree" 
  :default-checked-keys="default_select" 
  :props="defaultProps">
 </el-tree>
</el-form-item>

data() {
  return {
   data2: [],
   defaultProps: {
    children: 'child',
    label: 'name'
   },
   menu_ids: [],
   // Select by default   default_select: [],
   role_id: 0,
  }
 },
 methods: {
  /**
    * Get details
    */
  getDetail() {
   let that = this;
   that.$(.api_url + "/Role/show_edit", {
    token: ,
    role_id: that.role_id
   }, {
    emulateJSON: true
   }).then(
    function (res) {
     var data = ;
     if (data) {
       = ;
       = ;
       = ();
      
      
      /**Focus start*/
      if(typeof (data.menu_id) == 'object'){
       //Return to array       data.menu_id = (data.menu_id).map(key=> data.menu_id[key]);
      }
      //Assignment      data.menu_id.forEach((value)=>{
       that.default_select.push(value);
      });

      setTimeout(function () {
       that.default_select.forEach((value)=>{
        that.$(value,true,false)
       });
      },100);
      that.menu_ids = data.menu_id;
      /**The key end*/
     }
    });
  },

  /**
    * Attribute control
    */
  handleNodeClick(e, data) {
   (data);
   (e);
   this.menu_ids = 
  },
 }

In summary, the Tree tree control obtains the array data through the background interface, and needs to traverse it again and traverse it into an array, so that we can call it. If we directly get the array from the background and call it, we cannot get the content in this array.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.