修改树状列表默认显示几级的问题

src/main.js

 import Vue from 'vue'
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import moment from 'moment'
+import Element from "element-ui";
 // import ElementUI from 'element-ui'
 // import './styles/element-variables.scss'
 // import locale from 'element-ui/lib/locale/lang/en' // lang i18n
@@ -80,8 +81,8 @@ Vue.prototype.$parseDate = (value, format) => {
 Vue.config.productionTip = false
 // 全局组件挂载
 Vue.component('Pagination', Pagination)
-
-Vue.use(permission)
+Element.Dialog.props.closeOnClickModal.default = false
+Vue.use(permission,Element)
 
 new Vue({
   el: '#app',

src/views/system/role/index.vue

@@ -164,6 +164,7 @@
             check-strictly
             empty-text="加载中，请稍后"
             :props="defaultProps"
+            :default-expanded-keys="updateMenu"
             @check-change="handleMenuCheckChange"
           />
         </el-form-item>
@@ -178,7 +179,13 @@
     </el-dialog>
 
     <!-- 分配角色数据权限对话框 -->
-    <el-dialog class="roleDialog" @close='getList' title="数据权限信息" :visible.sync="openDataScope" width="900px" append-to-body>
+    <el-dialog
+      class="roleDialog"
+      @close='getList'
+      title="数据权限信息"
+      :visible.sync="openDataScope"
+      width="900px"
+      append-to-body>
       <el-row>
         <el-col style="width: 43%">
           <el-form ref="form" :model="form" :rules="rules" label-width="70px">
@@ -191,6 +198,7 @@
               :data="menuList"
               row-key="businessId"
               :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+              default-expand-all
               max-height="400px"
             >
               <!--        <el-form-item label="权限字符">-->
@@ -242,6 +250,7 @@
                 check-strictly
                 empty-text="加载中，请稍后"
                 :props="defaultProps"
+                :default-expanded-keys="customizetree"
                 @check-change="handleDeptCheckChange"
               />
 <!--              修改 :check-strictly="!form.deptCheckStrictly" 改为 check-strictly -->
@@ -269,6 +278,10 @@ export default {
   components: { Coolbutton },
   data() {
     return {
+      // 修改页面默认打开的树壮菜单
+      updateMenu: [],
+      // 自定义页面默认打开的树状菜单
+      customizetree: [],
       typeParent: 'text',
       typePrimary: 'primary',
       typeSuccess: 'success',
@@ -422,8 +435,8 @@ export default {
     /** 查询菜单树结构 */
     getMenuTreeselect() {
       menuTreeselect().then(response => {
-        console.info(response.data)
         this.menuOptions = response.data
+          this.updateMenu.push(this.menuOptions[0].id)
       })
     },
     /** 查询菜单列表 */
@@ -457,8 +470,7 @@ export default {
       })
     },
     // 树状图节点点击选中事件
-    handleMenuCheckChange(data, check, subCheck) {
-      console.info(data.children)// data为选中节点信息，check选中状态
+    handleMenuCheckChange(data, check, subCheck) {// data为选中节点信息，check选中状态
       if (data.children !== undefined && data.children !== null) { // 是否包含子节点
         this.checkNode(data.children, check) // 调用checkNode方法
       }
@@ -510,6 +522,10 @@ export default {
       return roleDeptTreeselect(roleId, menuId).then(response => {
         this.form.deptCheckStrictly = response.data.deptCheckStrictly
         this.deptOptions = response.data.depts
+        for(var i = 0; i<this.deptOptions[0].children.length; i++){
+          this.customizetree.push(this.deptOptions[0].children[0].id)
+        }
+        console.info(this.customizetree)
         this.form.dataScope = this.dataScopeOptions[response.data.dataScope - 1].value
         return response
       })
@@ -536,12 +552,14 @@ export default {
     cancel() {
       this.open = false
       this.reset()
+      this.updateMenu = []
     },
     // 取消按钮（数据权限）
     cancelDataScope() {
       this.openDataScope = false
       this.getList()
       this.reset()
+      this.customizetree = []
     },
     // 表单重置
     reset() {
@@ -667,6 +685,7 @@ export default {
     },
     /** 提交按钮 */
     submitForm: function() {
+      this.updateMenu = []
       this.$refs['form'].validate(valid => {
         if (valid) {
           this.form.menuCheckStrictly = 0
@@ -694,7 +713,7 @@ export default {
         this.form.deptIds = this.getDeptAllCheckedKeys()
         dataScope(this.form).then(response => {
           this.msgSuccess('修改成功')
-
+          this.customizetree = []
         })
       }
     },