vue2 实现树形选择器（el-tree/el-select）绝对有效！！！

vue2 实现树形选择器（el-tree/el-select）

组件结构

 <el-select v-model="value2" placeholder="请选择" multiple @change="delItem">
            <el-option value="1" lable="1" v-show="false"></el-option>
            <el-option v-for="item in selectArr" :key="item.id" :value="item.id" :lable="item.name"
                v-show="false"></el-option>
            <el-tree :props="props" :data="treeData" show-checkbox @check-change="handleCheckChange2" ref="tree2"
                node-key=id>
            </el-tree>
 </el-select>

说明:必须要有两个opitons，选择器组件内部没有options，会导致无法渲染内容。第一个options的作用是因为，当selectArr为空数组的时候，option节点在html中没有生成，会导致下拉框会显示无

方法

handleCheckChange2：getCheckedNodes获取到勾选节点的数组对象
this.selectArr = data 树和选择器进行显示联动

 handleCheckChange2() {
            let data = this.$refs.tree2.getCheckedNodes(true)
            this.selectArr = data
            this.value2 = data.map(item => item.id)
  },

delItem：点击删除选择器节点的时候，同时取消树形控件的对应节点

 delItem() {
            this.$refs.tree2.setCheckedKeys(this.value2)
}

最终效果展示

完整代码

<template>
    <div id="app">
        <el-select v-model="value" placeholder="请选择">
            <el-option value="1" lable="1" v-show="false"></el-option>
            <el-tree :props="props" :data="treeData" show-checkbox @check-change="handleCheckChange" ref="tree">
            </el-tree>
        </el-select>
        <el-select v-model="value2" placeholder="请选择" multiple @change="delItem">
            <el-option value="1" lable="1" v-show="false"></el-option>
            <el-option v-for="item in selectArr" :key="item.id" :value="item.id" :lable="item.name"
                v-show="false"></el-option>
            <el-tree :props="props" :data="treeData" show-checkbox @check-change="handleCheckChange2" ref="tree2"
                node-key=id>
            </el-tree>
        </el-select>
        <el-select v-model="value3" placeholder="请选择" multiple>
            <el-option value="1" lable="1"></el-option>
            <el-option value="2" lable="2"></el-option>
            <el-option value="3" lable="3"></el-option>
        </el-select>
        <button @click="btn">打印</button>
    </div>
</template>
<script>
import { options } from "../../testData.js"
export default {
    name: '',
    data() {
        return {
            props: {
                label: 'name',
                children: 'children',
                id: "id",
                isLeaf: "leaf",
            },
            treeData: [],
            value: [],
            value2: [],
            copyData: [],
            selectArr: [{}],
            value3: []
        }
    },
    created() {
        setTimeout(() => {
            this.treeData = options
            // this.selectArr = options
        }, 1000);
    },
    methods: {
        handleCheckChange() {
            let res = this.$refs.tree.getCheckedNodes(true);
            this.value = res.map(item => item.name).join(', ');
        },
        handleCheckChange2() {
            let data = this.$refs.tree2.getCheckedNodes(true)
            this.selectArr = data
            this.value2 = data.map(item => item.id)
        },
        btn() {
            console.log(this.value3, "value3");
            console.log(this.value2, "value2");
            console.log(this.value1, "value1");
        },
        delItem() {
            this.$refs.tree2.setCheckedKeys(this.value2)
        }
    }
}
</script>
<style scoped lang='less'></style>

效果

options数据来源需引入

export const options = [
    {
        "tbname": "kyxmda",
        "children": [],
        "hasChildren": false,
        "name": "测试档案表添加",
        "id": "4d9af4bddc314e2f925be6fe14e1c9ce",
        "type": 1,
        "params": "",
        "nodeType": 1,
        "parentId": "0",
        "order": 1,
        "status": "01"
    },
    {
        "tbname": "",
        "children": [
            {
                "tbname": "dqda",
                "children": [],
                "hasChildren": false,
                "name": "党群档案",
                "id": "7266a52d260e49d3b1e2e15055628a28",
                "type": 0,
                "params": "",
                "nodeType": 1,
                "parentId": "ea831dd4a8ee41b9b5c7c0db811cfff4",
                "order": 1,
                "status": "01"
            },  
            {
                "tbname": "swdajh",
                "children": [],
                "hasChildren": false,
                "name": "实物档案",
                "id": "740127fa524f491bb08367db99eacdf1",
                "type": 1,
                "params": "",
                "nodeType": 1,
                "parentId": "ea831dd4a8ee41b9b5c7c0db811cfff4",
                "order": 1,
                "status": "01"
            },
            {
                "tbname": "cbda",
                "children": [],
                "hasChildren": false,
                "name": "出版档案",
                "id": "c0192d29b5e04c98901100cf4ef10db4",
                "type": 1,
                "params": "",
                "nodeType": 1,
                "parentId": "ea831dd4a8ee41b9b5c7c0db811cfff4",
                "order": 1,
                "status": "01"
            },
            {
                "tbname": "",
                "children": [
                    {
                        "tbname": "bshdact",
                        "children": [],
                        "hasChildren": false,
                        "name": "博士后档案",
                        "id": "1cfc5dae04a8450c96ae5f64bf805bfb",
                        "type": 1,
                        "params": "",
                        "nodeType": 1,
                        "parentId": "cbe4b8f9e73847a4911c1de2ef62f122",
                        "order": 1,
                        "status": "01"
                    },
                    {
                        "tbname": "qrzbkcjd",
                        "children": [],
                        "hasChildren": false,
                        "name": "全日制本科成绩单",
                        "id": "a522e18f696f48c1b3a45173c5994c0d",
                        "type": 1,
                        "params": "",
                        "nodeType": 1,
                        "parentId": "cbe4b8f9e73847a4911c1de2ef62f122",
                        "order": 1,
                        "status": "01"
                    },
                    {
                        "tbname": "crjycjd",
                        "children": [],
                        "hasChildren": false,
                        "name": "承认教育成绩单",
                        "id": "c3983c1a523a42b49fb7c69a07a910d7",
                        "type": 1,
                        "params": "",
                        "nodeType": 1,
                        "parentId": "cbe4b8f9e73847a4911c1de2ef62f122",
                        "order": 1,
                        "status": "01"
                    }
                ],
                "hasChildren": true,
                "name": "教学档案",
                "id": "cbe4b8f9e73847a4911c1de2ef62f122",
                "type": 1,
                "params": "",
                "nodeType": 0,
                "parentId": "ea831dd4a8ee41b9b5c7c0db811cfff4",
                "order": 1,
                "status": "01"
            },
            {
                "tbname": "sbyqda",
                "children": [],
                "hasChildren": false,
                "name": "仪器设备档案",
                "id": "49ebe32fd7944ed4936f67014479c349",
                "type": 1,
                "params": "",
                "nodeType": 1,
                "parentId": "ea831dd4a8ee41b9b5c7c0db811cfff4",
                "order": 3,
                "status": "01"
            },
            {
                "tbname": "sjwsdajh",
                "children": [],
                "hasChildren": false,
                "name": "文书档案",
                "id": "36fb710c62234162995ca1d9f31c23e3",
                "type": 0,
                "params": "",
                "nodeType": 1,
                "parentId": "ea831dd4a8ee41b9b5c7c0db811cfff4",
                "order": 10,
                "status": "01"
            },
            {
                "tbname": "jjda",
                "children": [
                    {
                        "tbname": "jjda",
                        "children": [],
                        "hasChildren": false,
                        "name": "建设项目管理类文件",
                        "id": "4048990408c44968a105e4ef74d2ac39",
                        "type": 1,
                        "params": "",
                        "nodeType": 1,
                        "parentId": "680efdc50242404b92aca6a6bcf72a37",
                        "order": 1,
                        "status": "01"
                    },
                    {
                        "tbname": "jjxmdagl",
                        "children": [],
                        "hasChildren": false,
                        "name": "建设项目施工、监理文件",
                        "id": "885bb7e81c084ebd8386c0ecd9096788",
                        "type": 1,
                        "params": "",
                        "nodeType": 1,
                        "parentId": "680efdc50242404b92aca6a6bcf72a37",
                        "order": 1,
                        "status": "01"
                    }
                ],
                "hasChildren": true,
                "name": "基建档案",
                "id": "680efdc50242404b92aca6a6bcf72a37",
                "type": 1,
                "params": "",
                "nodeType": 0,
                "parentId": "ea831dd4a8ee41b9b5c7c0db811cfff4",
                "order": 10,
                "status": "01"
            }
        ],
        "hasChildren": true,
        "name": "南京档案管理",
        "id": "ea831dd4a8ee41b9b5c7c0db811cfff4",
        "type": 1,
        "params": "",
        "nodeType": 0,
        "parentId": "0",
        "order": 1,
        "status": "01"
    }
]