vue2 element-ui tree树形组件

需求：实现如图的效果

<el-dialog

      title="分配权限"

      :visible.sync="dialogVisible"

      width="40%"

      :before-close="handleClose"

    >

      <!-- :default-checked-keys="keyList" 数据回显，node-key加上唯一的标识 -->

      <!-- default-expand-all  默认展开所有的子节点 -->

      <el-tree

        ref="tree"

        :data="dataInt"

        :default-checked-keys="permIdsList"

        show-checkbox

        :default-expand-all="true"

        node-key="id"

        highlight-current

        :expand-on-click-node="false"

        :props="defaultProps"

      />

      <span slot="footer" class="dialog-footer">

        <el-button @click="dialogVisible = false">取 消</el-button>

        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>

      </span>

    </el-dialog>

export default {

  name: 'RoleCom',

  data() {

    return {

      dialogVisible: false,

      permIdsList: [],

      dataInt: [],

      defaultProps: {

        children: 'children',

        label: 'name'

      }

    }

  },

  created() {

    this.getSysRoleList()

  },

  methods: {

    // 打开弹框

    Open() {

      this.dialogVisible = true

      this.getOpen()

    },

    async getSysRoleList() {

      const res = await getSysRoleRequest({

        page: this.page,

        pagesize: this.pagesize

      })

      console.log(res, '角色列表')

      this.tableData = res.data.rows

    },

    // 获取已启用的角色列表

    async getCheckedKeys(id) {

      this.Open()

      // 获取权限点列表

      const res = await sysPermissionListRequest()

      console.log(res, '获取权限点列表')

      this.dataInt = transfromListToTree(res.data, 0)

      // 获取角色点详情

      const res2 = await getSysRoleEditRequest(id)

      console.log(res2, '角色点详情')

      //获得角色关联的权限集合

      this.permIdsList = res2.data.permIds

      console.log(this.permIdsList, 9999)

    },

    getOpen() {

      // 如果发现还是没有渲染,可能是dom树渲染的问题,通过this.$nextTick(() => {})解决

      this.$nextTick = () => {

      // 将后端接口数据回显到树上的方法

        this.$refs.tree.setCheckedKeys(this.permIdsList)

      }

    },

    handleClose(done) {

      this.dialogVisible = false

    }

  }

}