Vue Element Ui Select Tree组合使用

/**
 * 注册全局下拉树组件
 */
Vue.component('el-select-tree', {
    template: ` <el-select
            v-model="value"
            multiple
            collapse-tags
            :popper-append-to-body="false"
            v-bind="$attrs"
            v-on="$listeners"
            @remove-tag="removeTag"
            @clear="clear"
        >
        <el-option value="0" class="options">
        <el-tree
            ref="tree"
            :data="treeData"
            :props="props"
            show-checkbox
            v-bind="$attrs"
            v-on="$listeners"
            check-on-click-node
            @check-change="checkChange"
        />
    </el-select>`,
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        treeData: {
            type: Array,
            default () {
                return []
            }
        },
        // 回显的keys
        echoedKeys: {
            type: Array,
            default () {
                return []
            }
        },
        showParent: {
            type: Boolean,
            default: false
        },
        props: {
            type: Object,
            default () {
                return {
                    key: "key",
                    label: 'label',
                    children: 'children'
                }
            }
        }
    },
    data() {
        return {
            options: [],
            value: [],
            copyValue: [],
            selectValue: [],
            keys: ''
        }
    },
    watch: {
        echoedKeys(val) {
            this.handleEchoed(val)
        },
        treeData(val) {
            if (!val.length) {
                this.value = []
                this.$emit('change', this.value)
            }
        }
    },
    methods: {
        checkChange() {
            this.selectValue = this.$refs.tree.getCheckedNodes(true)
            this.$emit('change', this.selectValue)
            if (this.showParent) {
                this.handleShowParent()
            } else {
                this.value = this.selectValue.map(item => item[this.props.label])
            }
        },
        removeTag(tag) {
            const keys = this.$refs.tree.getCheckedKeys(true)
            keys.splice(0, 1)
            this.$refs.tree.setCheckedKeys(keys)
            this.checkChange()
        },
        clear() {
            const keys = []
            this.$refs.tree.setCheckedKeys(keys)
        },
        handleEchoed(keys) {
            this.$refs.tree.setCheckedKeys(keys)
        },
        handleShowParent() {
            const selectKeys = this.$refs.tree.getCheckedKeys(true)
            this.copyValue = this.value = selectKeys.map(key => {
                const node = this.$refs.tree.getNode(key)
                return node.data[this.props.label]
            })
        }
    }
})

data() {
                    return {
                       
                        data: [{
                            id: '000',
                            name: '测试客户1',
                            children: [{
                                id: '1001',
                                name: '测试1',
                            }, {
                                id: '1002',
                                name: '测试2',
                            }, {
                                id: '1003',
                                name: '测试5',
                            }]
                        }, {
                            id: '001',
                            name: '测试客户2',
                            children: [{
                                id: '1004',
                                name: '测试4',
                            }, {
                                id: '1005',
                                name: '测试5',
                            }]
                        }],
                        value: [],
                        echoedKeys: [],
                        defaultProps: {
                            children: 'children',
                            label: 'name',
                            key: 'id'
                        }
                    }
                },

调用组件

<el-select-tree v-model="value" :tree-data="data" :props="defaultProps" :echoed-keys="echoedKeys" show-parent clearable node-key="id">
                                    </el-select-tree>

在methods内定义一个方法获取value变量的值