VUE(9) : vue-element-admin[9] : 菜单树展示及回显

 菜单数据

this.routes = [
        {"path":1,"title":"权限测试页","children":[{"path":11,"title":"页面权限"},{"path":12,"title":"指令权限"},{"path":13,"title":"角色权限"}]},
        {"path":2,"title":"权限测试页2","children":[{"path":21,"title":"页面权限2"},{"path":22,"title":"指令权限2"},{"path":23,"title":"角色权限2"}]},
      ]

 选中

const xuan_zhong = [{"path":11},{"path":21}]

注 : 选中不用传递上级菜单的path

 完整代码

<template>
  <div class="app-container">
    <el-button type="primary" @click="handleAddRole">
      {{ $t('permission.addRole') }}
    </el-button>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit Role':'New Role'">
      <el-form :model="role" label-width="80px" label-position="left">
        <el-form-item label="Menus">
          <el-tree ref="tree" :check-strictly="false" :data="routesData" :props="defaultProps" node-key="path"
            :highlight-current="true" :expand-on-click-node="false" show-checkbox default-expand-all
            class="permission-tree" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">
          {{ $t('permission.cancel') }}
        </el-button>
        <el-button type="primary" @click="confirmRole">
          {{ $t('permission.confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  const defaultRole = {
    key: '',
    name: '',
    description: '',
    routes: []
  }

  export default {
    data() {
      return {
        role: Object.assign({}, defaultRole),
        routes: [],
        rolesList: [],
        dialogVisible: false,
        dialogType: 'new',
        defaultProps: {
          children: 'children',
          label: 'title'
        }
      }
    },
    computed: {
      routesData() {
        return this.routes
      }
    },
    created() {
      this.getRoutes()
    },
    methods: {
      async getRoutes() {
        // 菜单列表
        this.routes = [{
            "path": 1,
            "title": "权限测试页",
            "children": [{
              "path": 11,
              "title": "页面权限"
            }, {
              "path": 12,
              "title": "指令权限"
            }, {
              "path": 13,
              "title": "角色权限"
            }]
          },
          {
            "path": 2,
            "title": "权限测试页2",
            "children": [{
              "path": 21,
              "title": "页面权限2"
            }, {
              "path": 22,
              "title": "指令权限2"
            }, {
              "path": 23,
              "title": "角色权限2"
            }]
          },
        ]
      },
      handleAddRole() {
        this.dialogVisible = true
        // 回显
        const isHuiXian = true
        if (isHuiXian) {
          const xuan_zhong = [{
            "path": 11
          }, {
            "path": 12
          }]
          this.dialogType = 'new'
          this.$nextTick(() => {
            this.$refs.tree.setCheckedNodes(xuan_zhong)
          })
        }
      },
      async confirmRole() {
        // 提交选中的菜单
        const checkedKeys = this.$refs.tree.getCheckedKeys()
        console.log(JSON.stringify(checkedKeys))
      }
    }
  }
</script>