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

专业技能

一般来说,面试官会根据你的简历内容去提问,但是技术基础还有需要自己去准备分类,形成自己的知识体系的。简单列一下我自己遇到的一些题

最近得空把之前遇到的面试题做了一个整理,包括我本人自己去面试遇到的,还有其他人员去面试遇到的,还有网上刷到的,我都统一的整理了一下,希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限,仅展示部分内容

    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
        let all = false;//选择全部 true
        if(node.length>=1){

            Array.from(node,(choose) => {//遍历node集合
                if(choose[0]==="all"){
                    all = true;
                    
                    this.form.classesAndStudent = [["all"]]//清空之前的选择
                    
                    Array.from(this.prop,(item) => {
                        if(item.value!="all"){
                            item.disabled=true;//禁用其他选项
                        }
                    })
                }
                else if(!all){//选择不为全部时
                    Array.from(this.prop,(item) => {
                        if(choose[0]==="allStudent"){//选择全部学生
                            if(item.value==="student"){
                                allStudent = true;
                                item.disabled=true;
                            }
                        }
                        if(choose[0]==="allTeacher"){//选择全部老师
                            if(item.value==="teacher"){
                                allTeacher = true;
                                item.disabled=true;
                            }
                        }

总结:

  • 函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;

  • 它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;

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

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;

我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势

理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;

所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值