element ui 中 Cascader 级联选择器实现 动态加载 动态禁用 入门_cascader动态加载(1)

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

                 @change="handleClassOrStudentChange" //当选中节点变化时触发
                 >
    </el-cascader>

props

props: {
// emitPath:false,//返回值只有value
multiple: true, //多选模式
lazy: true, // 是否动态加载子节点，需与 lazyLoad 方法结合使用
lazyLoad: this.handleGetClassOrStudent, //懒加载调用的方法
},

========================================================================================================

//联级选择器获得学生或者班级或者教师

handleGetClassOrStudent(node, resolve){
//node相当于点击的选项，其中有上一级的信息
//第一次调用时 node中什么也没有
//resolve() 返回的内容是子选项
const { data } = node;//等同于const data = node.data
const { parent } = node;

    if(data.type==="root"&&data.value!="teacher"){
        //获得班级类型
        this.$axios.get("/manage/classesType/list").then(response => {
            // console.log(response.data.data)
            const nodes = Array.from(response.data.data,item => ({
                //于stream流差不多，将后台返回的数据进行处理
                
                value: item.id, //选中项绑定值
                label: item.typeName,//标签上显示文字
                leaf: false,//是否有子选项
                type: 'classesType'//这是自己定义的 方便区分
            }))
            //将nodes返回
            resolve(nodes);
        })
    }
    else if(data.value==="teacher"){
        //获得教师
        this.$axios.get("/manage/notice/findByTeacher").then(response => {
            const nodes = Array.from(response.data.teacherList, item => (console.log(response),{
                value: item.id,
                label: item.name,
                leaf: true,
                type: 'teacher'
            }))
            resolve(nodes)
        })
    }
    else if(data.type==='classesType'){
        //获得班级
        this.$axios.get("/manage/notice/noticeFindList/"+data.value).then(response => {
            const nodes = Array.from(response.data.classesList,item => ({
                value: item.id,
                label: item.classesName,
                leaf: parent.data.value!='student',
                type: 'classes'
            }))
            resolve(nodes);
        })
    }
    else if(data.type==='classes'&&parent.parent.value==='student'){
        //获得学生
        this.$axios.get("/manage/notice/findByClassStudent/"+data.value).then(response => {
            const  nodes = Array.from(response.data.studentList,item => ({
                value: item.id,
                label: item.name,
                leaf: true,
                type: 'studnet'
            }))
            resolve(nodes)
        })
    }
    resolve();

},

prop

prop:[
{
value: ‘all’, //选中项绑定值
label: ‘全部’, //标签上显示文字
leaf: true, //是否有子选项
type: ‘root’, //这是自己定义的
disabled: false //选项是否禁用
},
{
value: ‘allStudent’,
label: ‘全部学生’,
leaf: true,
type: ‘root’,
disabled: false
},
{
value: ‘allTeacher’,
label: ‘全部教师’,
leaf: true,
type: ‘root’,
disabled: false
},
{
value: ‘student’,
label: ‘学生’,
leaf: false,
type: ‘root’,
disabled: false
},
{
value: ‘teacher’,
label: ‘教师’,
leaf: false,
type: ‘root’,
disabled: false
}
]

handleClassOrStudentChange

//选择器选择后触发
handleClassOrStudentChange(node, resolve){
// console.log(node)
// console.log(node[0][0]==‘allStudent’)
// console.log(node)
// console.log(this.prop)

    if(node){
        let allTeacher = false;//选择全部教师true
        let allStudent = false;//选择全部学生true

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

78314417)]

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。