通過tree樹形控件的default-checked-keys屬性來設(shè)置默認選中的節(jié)點

html.vue

<el-form-item label="角色權(quán)限："> <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>

html.js

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'){       //轉(zhuǎn)數(shù)組       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;      /**重點結(jié)束*/     }    });  },  /**   * 屬性控件   */  handleNodeClick(e, data) {   console.log(data);   console.log(e);   this.menu_ids = data.checkedKeys  }, }

總結(jié)，Tree樹形控件通過后臺接口獲取到數(shù)組數(shù)據(jù)，還需要再次遍歷，將它再遍歷為數(shù)組，這樣我們才可以調(diào)用，如果直接從后臺獲取到數(shù)組來調(diào)用的時候，我們是獲取不到這個數(shù)組中的內(nèi)容。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。