VUE-Element-UI：select-tree

 一 、概述

 本文主要是在Element-UI+VUE框架下，利用el-select 、el-tree 组件实现了下拉框多选、回显的效果，如下图：

二、实例代码

1. HTML代码

<el-select v-model="mineStatus" placeholder="请选择" multiple collapse-tags @change="selectChange">
    <el-option  :value="mineStatusValue" style="height: auto">
        <el-tree :data="remarksItemList" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps" @check-change="handleCheckChange"></el-tree>
    </el-option>
</el-select>

2. JS代码

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            mineStatus: "",
            mineStatusValue: [],
            remarksItemCheckedList:[],  // 回显数据["A","B"]
            remarksItemList:[  //树形数据
                {
                    "id":"A",
                    "name":"A",
                    "child":[]
                },
                {
                    "id":"B",
                    "name":"B",
                    "child":[]
                },
                {
                    "id":"C",
                    "name":"C",
                    "child":[]
                },
                {
                    "id":"D",
                    "name":"D",
                    "child":[
                        {"id":"D①","name":"①","child":[]},
                        {"id":"D②","name":"②","child":[]},
                        {"id":"D③","name":"③","child":[]},
                        {"id":"D④","name":"④","child":[]}
                    ]
                },
                {
                    "id":"E",
                    "name":"E",
                    "child":[
                        {"id":"E①","name":"①","child":[]},
                        {"id":"E②","name":"②","child":[]},
                        {"id":"E③","name":"③","child":[]}
                    ]
                },
                {
                    "id":"F",
                    "name":"F",
                    "child":[]
                },
                {
                    "id":"G",
                    "name":"G",
                    "child":[]
                },
                {
                    "id":"H",
                    "name":"H",
                    "child":[
                        {"id":"H①","name":"①","child":[]},
                        {"id":"H②","name":"②","child":[]},
                        {"id":"H③","name":"③","child":[]}
                    ]
                },
                {
                    "id":"I",
                    "name":"I",
                    "child":[
                        {"id":"I①","name":"①","child":[]},
                        {"id":"I②","name":"②","child":[]},
                        {"id":"I③","name":"③","child":[]}
                    ]
                }
            ],
            checkedRemarksItem: [],
            defaultProps: {
                children: "child",
                label: "name"
            },
            title: '住院患者Braden 压疮风险评估表'
        },
        watch: {
            filterText: function(val) {
                debugger;
                this.$refs.remarksItemList.filter(val);
            }
        },
 
        methods: {
         
            //select框值改变时候触发的事件
            selectChange(e){
                var arrNew = [];
                var dataLength = this.mineStatusValue.length;
                var eleng = e.length;
                for(let i = 0; i< dataLength ;i++){
                    for(let j = 0; j < eleng; j++){
                        if(e[j] === this.mineStatusValue[i].name){
                            arrNew.push(this.mineStatusValue[i])
                        }
                    }
                }
                this.checkedRemarksItem = arrNew;
                this.$refs.tree.setCheckedKeys(this.remarksItemCheckedList);
                // this.$refs.tree.setCheckedNodes(arrNew);//设置勾选的值
            },
            handleCheckChange() {
                let res = this.$refs.tree.getCheckedNodes(true, true); //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
                var parentKey = this.$refs.tree.getCheckedKeys();
                var childKey = this.$refs.tree.getHalfCheckedKeys();
                vm.remarksItemCheckedList = parentKey.concat(childKey);
                vm.assessment.nursingMeasures = vm.remarksItemCheckedList;
                let arrLabel = [];
                let arr = [];
                res.forEach(item => {
                    arrLabel.push(item.name);
                arr.push(item);
             });
                this.mineStatusValue = arr;
                this.mineStatus = arrLabel;

            }
        },
        created: fnInitData
    })

    function beginFun(){
 
        let nursingMeasures =   JSON.parse(this.assessment.nursingMeasures);
        var arrNew = [];
        nursingMeasures.forEach(item => {
            var childObj = item.childId;
            var  id = item.id;
        arrNew.push(id)
        for (var i = 0; i < childObj.length; i++) {
             if(i == childObj.length){
                 arrNew.push(id.concat(whatNumber(childObj)));
             }else{
                 arrNew.push(id.concat(whatNumber(childObj)).concat(","));
             }
        }
    });
        this.remarksItemCheckedList = arrNew;
        this.$refs.tree.setCheckedKeys(this.remarksItemCheckedList);  //树形结构数据回显
    }

    function extracted(nursingTree, DChildTree, EChildTree, HChildTree, IChildTree) {
        if (DChildTree.length > 0) {
            var parentObj = {};
            parentObj["id"] = "D";
            parentObj["isCheck"] = "true";
            parentObj["childId"] = DChildTree;
            nursingTree.push(parentObj);
        }
        if (EChildTree.length > 0) {
            var parentObj = {};
            parentObj["id"] = "E";
            parentObj["isCheck"] = "true";
            parentObj["childId"] = DChildTree;
            nursingTree.push(parentObj);
        }
        if (HChildTree.length > 0) {
            var parentObj = {};
            parentObj["id"] = "H";
            parentObj["isCheck"] = "true";
            parentObj["childId"] = DChildTree;
            nursingTree.push(parentObj);
        }
        if (IChildTree.length > 0) {
            var parentObj = {};
            parentObj["id"] = "I";
            parentObj["isCheck"] = "true";
            parentObj["childId"] = IChildTree;
            nursingTree.push(parentObj);
        }
    }

    function endFun(){
        if (this.assessment.nursingMeasures){
            var nursingTree =[];
           var DChildTree =[];
           var EChildTree =[];
           var HChildTree =[];
           var IChildTree =[];
            for (var i = 0; i < this.remarksItemCheckedList.length; i++) {
                var item = this.remarksItemCheckedList[i];
                if(item.indexOf("D") != -1 && item.length == 2){
                    var tempval = item.substr(item.length-1,1)
                    DChildTree.push(whatNumber(tempval));
                }
                  if(item.indexOf("E") != -1 && item.length == 2){
                    var tempval = item.substr(item.length-1,1)
                    EChildTree.push(whatNumber(tempval));
                }
                  if(item.indexOf("H") != -1 && item.length == 2){
                    var tempval = item.substr(item.length-1,1)
                    HChildTree.push(whatNumber(tempval));
                }
                  if(item.indexOf("I") != -1 && item.length == 2){
                    var tempval = item.substr(item.length-1,1)
                    IChildTree.push(whatNumber(tempval));
                }
              if((item.indexOf("A") != -1 || item.indexOf("B") != -1 || item.indexOf("C") != -1 || item.indexOf("F") != -1 || item.indexOf("G") != -1) && item.length == 1){
                    var parentObj = {};
                    parentObj["id"] = item;
                    parentObj["isCheck"] = "true";
                    parentObj["childId"] = [];
                    nursingTree.push(parentObj);
                }
            }
            extracted(nursingTree, DChildTree, EChildTree, HChildTree, IChildTree);
            this.assessment.nursingMeasures = JSON.stringify(nursingTree);
        }
        if (this.assessment.resultScore <= 12){
            this.assessment.isHighRisk = 1;
        }else{
            this.assessment.isHighRisk = 0;
        }
 
    }

    function whatNumber(mealtime) {
        let food = '';
        switch (mealtime) {
            case '1':
                food = '①';
                break;
            case '2':
                food = '②';
                break;
            case '3':
                food = '③';
                break;
            case '4':
                food = '④';
                break;
            case '①':
                food = '1';
                break;
            case '②':
                food = '2';
                break;
            case '③':
                food = '3';
                break;
            case '④':
                food = '4';
                break;
            default:
                food = '0';
        }

        return food;
    }
</script>

 

三、参考资料：

资料一：https://blog.csdn.net/weixin_45140661/article/details/90898558?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.nonecase

资料二：https://blog.csdn.net/sqlquan/article/details/84636595