element ui 级联选择器显示后台返回数据

首先表单这样写

<el-form-item label="事件类型:" prop="type">
                        <el-cascader
                                v-model="eventForm.type"
                                :options="options"
                                @change="handleChange"
                                ref='selecttree'
                                :props="{value:'id' }"
                                :show-all-levels="false"
                                clearable
                        >
                        </el-cascader>
                    </el-form-item>

data中:

options:[],
eventForm:{
     type:'',
}

methods中:用来显示每次点击的选项

handleChange(value) {
                let me=this;
                const checkedNodes=me.$refs['selecttree'].getCheckedNodes();
                me.eventForm.type=checkedNodes[0].value;
            },

从后台接口拿到数据:

getJlTypelist(){
                let me = this;
                let formdata = new FormData();
                formdata.append('参数', '字段');
                me.$axios.post('接口路径',参数).then(function (data) {
                    me.options = me.getTypelist(data);
                });
            },

对返回数据进行处理:

/*递归判断列表*/
            getTypelist(data) {
                let me = this;
                for (let i = 0; i < data.length; i++) {
                    for (let j = 0; j < data[i].children.length; j++) {
                        //这个循环是第三级存在的时候
                        for(let k = 0; k < data[i].children[j].children.length; k++){
                            if (data[i].children[j].children[k].children.length < 1) {
                                data[i].children[j].children[k].children = undefined;
                            }
                        }
                        //如果第三级不存在,如果没有下面这个就会出现多一级空白的情况
                        if (data[i].children[j].children.length < 1) {
                            data[i].children[j].children = undefined;
                        }
                    }
                }
                return data;
            },

这是第二、三级都存在的情况下,没有加上面的if

这是第二、三级都存在的情况下,没有加上面的第三个for循环

每个人遇到的情况可能不一样,部分可以参考

猜你喜欢

转载自blog.csdn.net/Humor_L/article/details/125376452