组件内使用初始化报错

[hqzh]

<template>
    <el-tree-select
        :styles="styles"
        v-model="values"
        :selectParams="selectParams"
        :treeParams="treeParams"
        @searchFun="_searchFun"
        @node-click="_nodeClickFun"
        ref="treeSelect"
    />
</template>

<script>
import ElTreeSelect from 'el-tree-select';
export default {
    components: { ElTreeSelect },
    data() {
        return {
            styles: {
                width: '300px',
            },
            test: '',
            values: '',
            selectParams: {
                multiple: true,
                clearable: true,
                placeholder: '请输入内容',
            },
            treeParams: {
                clickParent: false,
                filterable: true,
                'check-strictly': true,
                'default-expand-all': true,
                'expand-on-click-node': false,
                data: [],
                props: {
                    children: 'child',
                    label: 'name',
                    disabled: 'disabled',
                    value: 'testId',
                },
            },
        };
    },
    mounted() {
        let data = [
            {
                testId: '1',
                name: '节点1',
                disabled: true,
                child: [
                    {
                        testId: '11111',
                        name: '子节点',
                    },
                ],
            },
            {
                testId: '2',
                name: '节点2',
                child: [
                    {
                        testId: '222222',
                        disabled: true,
                        name: '子节点',
                    },
                ],
            },
            {
                testId: '3',
                name: '节点3',
            },
            {
                testId: '4',
                name: '节点4',
            },
            {
                testId: '5',
                name: '节点5',
            },
            {
                testId: '6',
                name: '节点6',
            },
        ];
        // setTimeout(() => {
            this.treeParams.data = data;
            this.$refs.treeSelect.treeDataUpdateFun(data);
        // }, 4000);
    },
    methods: {
        // 下拉框修改
        _selectChange(val) {
            console.log(val, '<-select change');
        },
        // 树点击
        _nodeClickFun(data, node, vm) {
            console.log('this _nodeClickFun', this.values, data, node);
        },
        // 树过滤
        _searchFun(value) {
            console.log(value, '<--_searchFun');
            // 自行判断 是走后台查询，还是前端过滤
            // this.$refs.treeSelect.$refs.tree.filter(value);
            this.$refs.treeSelect.filterFun(value);
            // 后台查询
            // this.$refs.treeSelect.treeDataUpdateFun(treeData);
        },
    },
};
</script>

[hqzh]

很奇怪的是components: { ElTreeSelect } 换成comments: { ElTreeSelect } 正常

[ayiaq1]

nextTick生命周期之后使用ref

[hqzh]

nextTick生命周期之后使用ref

await this.$nextTick() 一样的问题 很奇怪的是components: { ElTreeSelect } 换成comments: { ElTreeSelect } 正常 ，这个我就百思不得其解了

<template>
    <el-tree-select
        :styles="styles"
        v-model="values"
        :selectParams="selectParams"
        :treeParams="treeParams"
        @searchFun="_searchFun"
        @node-click="_nodeClickFun"
        ref="treeSelect"
    />
</template>

<script>
import ElTreeSelect from 'el-tree-select';
export default {
    components: { ElTreeSelect },
    data() {
        return {
            styles: {
                width: '300px',
            },
            test: '',
            values: '',
            selectParams: {
                multiple: true,
                clearable: true,
                placeholder: '请输入内容',
            },
            treeParams: {
                clickParent: false,
                filterable: true,
                'check-strictly': true,
                'default-expand-all': true,
                'expand-on-click-node': false,
                data: [],
                props: {
                    children: 'child',
                    label: 'name',
                    disabled: 'disabled',
                    value: 'testId',
                },
            },
        };
    },
    async mounted() {
        let data = [
            {
                testId: '1',
                name: '节点1',
                disabled: true,
                child: [
                    {
                        testId: '11111',
                        name: '子节点',
                    },
                ],
            },
            {
                testId: '2',
                name: '节点2',
                child: [
                    {
                        testId: '222222',
                        disabled: true,
                        name: '子节点',
                    },
                ],
            },
            {
                testId: '3',
                name: '节点3',
            },
            {
                testId: '4',
                name: '节点4',
            },
            {
                testId: '5',
                name: '节点5',
            },
            {
                testId: '6',
                name: '节点6',
            },
        ];
        // setTimeout(() => {
            await this.$nextTick()
            this.treeParams.data = data;
            // await this.$nextTick()
            this.$refs.treeSelect.treeDataUpdateFun(data);
        // }, 4000);
    },
    methods: {
        // 下拉框修改
        _selectChange(val) {
            console.log(val, '<-select change');
        },
        // 树点击
        _nodeClickFun(data, node, vm) {
            console.log('this _nodeClickFun', this.values, data, node);
        },
        // 树过滤
        _searchFun(value) {
            console.log(value, '<--_searchFun');
            // 自行判断 是走后台查询，还是前端过滤
            // this.$refs.treeSelect.$refs.tree.filter(value);
            this.$refs.treeSelect.filterFun(value);
            // 后台查询
            // this.$refs.treeSelect.treeDataUpdateFun(treeData);
        },
    },
};
</script>

[ayiaq1]

el-tree-select的使用 需要Vue.use注册，否则就需要走import 可以打印 this.$refs.xx

[hqzh]

el-tree-select的使用 需要Vue.use注册，否则就需要走import 可以打印 this.$refs.xx

使用了import啊，报错不是说找不到this.$refs.treeSelect,而是找不到报错的那个方法，大佬可以试下import方式

[ayiaq1]

如果要用 el-tree-select 需要 Vue.use 并且取消 import

[hqzh]

总结一下，组件内使用直接import就好了，不需要commponets:{ElTreeSelect}