element ui tree组件setCheckedKeys报错

Error in nextTick: “TypeError: Cannot read properties of undefined (reading ‘setCheckedKeys’)”

记得把nextTick方法放在this.permsDialogVisible = true的后面

            //打开分配权限对话框
            allocatePerms(row) {
                //获取当前打开的用户所拥有的权限树
                this.$http.get(`menu/checkedTree/${row.roleId}`).then(res => {
                    if (res.data.code !== 1) {
                        return this.$message.error('获取用户权限树失败')
                    }

                    this.permsDialogVisible = true
                    this.$nextTick(()=>{
                        this.$refs.permissionTree.setCheckedKeys(res.data.data)
                    })
                       
                })
            
            },
Vue2 封装 Element UI Tree 组件的步骤如下: 1. 安装 Element UI ```bash npm install element-ui --save ``` 2. 在 main.js 中引入 Element UI ```js import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 创建 Tree.vue 组件 ```vue <template> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"> </el-tree> </template> <script> export default { name: 'Tree', props: { data: { type: Array, default: () => [] }, defaultProps: { type: Object, default: () => ({ children: 'children', label: 'label' }) } }, methods: { handleNodeClick(node) { this.$emit('node-click', node) } } } </script> ``` 4. 在需要使用 Tree组件中引入 Tree 组件 ```js import Tree from './Tree.vue' export default { name: 'MyComponent', components: { Tree }, data() { return { treeData: [ { label: '一级 1', children: [ { label: '二级 1-1', children: [ { label: '三级 1-1-1' }, { label: '三级 1-1-2' } ] }, { label: '二级 1-2', children: [ { label: '三级 1-2-1' }, { label: '三级 1-2-2' } ] } ] }, { label: '一级 2', children: [ { label: '二级 2-1', children: [ { label: '三级 2-1-1' }, { label: '三级 2-1-2' } ] }, { label: '二级 2-2', children: [ { label: '三级 2-2-1' }, { label: '三级 2-2-2' } ] } ] } ], defaultProps: { children: 'children', label: 'label' } } }, methods: { handleNodeClick(node) { console.log(node) } } } ``` 5. 在组件模板中使用 Tree 组件 ```vue <template> <div> <tree :data="treeData" :default-props="defaultProps" @node-click="handleNodeClick"> </tree> </div> </template> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值