详解vue-element Tree树形控件填坑路

<el-form-item label="角色权限："> <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: [],   // 默认选中   default_select: [],   role_id: 0,  } }, methods: {  /**   * 获取详情   */  getDetail() {   let that = this;   that.$http.post(that.adminApi.api_url + "/Role/show_edit", {    token: that.token,    role_id: that.role_id   }, {    emulateJSON: true   }).then(    function (res) {     var data = res.body;     if (data) {      that.ruleForm.name = data.name;      that.ruleForm.sort = data.sort;      that.ruleForm.status = data.status.toString();                  /**重点开始*/      if(typeof (data.menu_id) == 'object'){       //转数组       data.menu_id = Object.keys(data.menu_id).map(key=> data.menu_id[key]);      }      //赋值      data.menu_id.forEach((value)=>{       that.default_select.push(value);      });      setTimeout(function () {       that.default_select.forEach((value)=>{        that.$refs.tree.setChecked(value,true,false)       });      },100);      that.menu_ids = data.menu_id;      /**重点结束*/     }    });  },  /**   * 属性控件   */  handleNodeClick(e, data) {   console.log(data);   console.log(e);   this.menu_ids = data.checkedKeys  }, }