elementUI 下拉树

elementUI 下拉树

一、实现点
1、下拉框与树形控件的组合。
2、选中项以tag标签形式展示。
3、树以复选框选中取消为有效操作。
4、删除tag标签同步取消树对应数据的选择。
5、dataTreeList为树的测试数据，数据格式。
6、initValue展示下拉选择文本。optionValue为下拉选择key值。selectdArray为树选中标识。resultArray存放选中的对象。
7、deleteCharacter是对普通数组删除元素的方法。
8、chooseValue是对象数组删除指定对象的方法，其中type区分返回值类型。
二、代码

<template>
    <div class="select-trees">
        <el-select
            v-model="initValue"
            filterable
            multiple
            :clearable="false"
            :collapse-tags="false"
            :placeholder="'请选择'+placeholderRemark"
            class="select-number select-border"
            popper-class="selectClass"
            :popper-append-to-body="false"
            @remove-tag="handlerRemoveTag"
            @change="changeOption"

        >
            <el-option
                :value="optionValue"
                style="height: auto"
            >
                <el-tree
			show-checkbox
			ref="tree"
			node-key="id"
			empty-text="暂无数据"
			:data="dataTreeList"
			:props="propsData"
			:check-on-click-node="false"
			:expand-on-click-node="false"
			:default-checked-keys="selectdArray"
			@check-change="handleCheckChange"
		/>
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return{
            initValue: [],
            optionValue: [],
            placeholderRemark: '',
            selectdArray: [],
            resultArray: [],
            deleteFlag: '',
            propsData: {
                id: 'id',
                label: 'name',
                children: 'children'
            },
            dataTreeList: [
                { id: '01', name: '水果', children: [
                    { id: '0101', name: '苹果', children: [
                        { id: '010101', name: '红苹果', children: [] },
                        { id: '010102', name: '青苹果', children: [] },
                        { id: '010103', name: '黄苹果', children: [] }
                    ] },
                    { id: '0102', name: '香蕉', children: [] },
                    { id: '0103', name: '橙子', children: [] }
                ] },
                { id: '02', name: '动物', children: [] },
                { id: '03', name: '蔬菜', children: [] }
            ]
        }
    },
    watch: {
    },
    methods: {
        changeOption(item) {
            console.log('select======', this.initValue,this.optionValue);
        },
        handlerRemoveTag(item) {
            // 删除选中的tag
            let removeValue = this.chooseValue(this.resultArray, 'name', item, 0);
            this.deleteCharacter(this.optionValue, removeValue.id);
            this.deleteCharacter(this.selectdArray, removeValue.id);
            // 同步更新下拉内容
            this.$refs.tree.setChecked(removeValue.id, false, true);
        },
        handleCheckChange(data, checked, indeterminate) {
            // 下拉树的复选框操作
            if (checked) {
                this.initValue.push(data.name);
                this.optionValue.push(data.id);
                this.selectdArray.push(data.id);
                this.resultArray.push({id: data.id, name: data.name});
            } else {
                this.deleteCharacter(this.initValue, data.name);
                this.deleteCharacter(this.optionValue, data.id);
                this.deleteCharacter(this.selectdArray, data.id);
                this.chooseValue(this.resultArray, 'id', data.id, 1);
            }
        },
        deleteCharacter(list, str) {
            let index = list.indexOf(str);
            if (index > -1) {
                list.splice(index, 1);
            }
            return list
        },
        chooseValue(list, key, str, type) {
            let result = null;
            list.forEach((item, index)=> {
                if (item[key] === str) {
                    result = item;
                    list.splice(index, 1);
                }
            });
            return type ? list : result;
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-select .el-input{
     200px;
}
</style>