VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线_两个el-tree的循环遍历(1)

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」,内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中,共计111道

HTML

  • HTML5有哪些新特性?

  • Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?

  • 如何实现浏览器内多个标签页之间的通信?

  • ⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?

  • 简述⼀下src与href的区别?

  • cookies,sessionStorage,localStorage 的区别?

  • HTML5 的离线储存的使用和原理?

  • 怎样处理 移动端 1px 被 渲染成 2px 问题?

  • iframe 的优缺点?

  • Canvas 和 SVG 图形的区别是什么?

JavaScript

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

  • 问:0.1 + 0.2 === 0.3 嘛?为什么?

  • JS 数据类型

  • 写代码:实现函数能够深度克隆基本类型

  • 事件流

  • 事件是如何实现的?

  • new 一个函数发生了什么

  • 什么是作用域?

  • JS 隐式转换,显示转换

  • 了解 this 嘛,bind,call,apply 具体指什么

  • 手写 bind、apply、call

  • setTimeout(fn, 0)多久才执行,Event Loop

  • 手写题:Promise 原理

  • 说一下原型链和原型链的继承吧

  • 数组能够调用的函数有那些?

  • PWA使用过吗?serviceWorker的使用原理是啥?

  • ES6 之前使用 prototype 实现继承

  • 箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?

  • 事件循环机制 (Event Loop)

	routeList: [
    {
      // title: '授权管理后台',
      list: [
        {
          id: 1,
          label: '工程管理', //一级控件
          children: [
            {
              id: 2,
              label: '物料管理', //二级控件
              children: [
                {
                  id: 4,
                  label: '列表查看', //三级控件
                  // children: [
                  // {
                  // id: 7,
                  // label: '页面查看权限' //四级控件
                  // },
                  // {
                  // id: 8,
                  // label: '编辑'
                  // }
                  // ]
                },
                {
                  id: 5,
                  label: '查询',
                  // children: [
                  // {
                  // id: 9,
                  // label: '次数分布child1'
                  // },
                  // {
                  // id: 10,
                  // label: '次数分布child2'
                  // }
                  // ]
                }
              ]
            },
            {
              id: 3,
              label: '工艺流程管理',
              children: [
                {
                  id: 6,
                  label: '列表查看',
                  // children: [
                  // {
                  // id: 7,
                  // label: '页面查看权限'
                  // }
                  // ]
                },
                {
                  id: 7,
                  label: '查询',
                  // children: [
                  // {
                  // id: 7,
                  // label: '页面查看权限'
                  // }
                  // ]
                }
              ]
            }
          ]
        },
        {
          id: 111,
          label: '销售管理',
          children: [
            {
              id: 112,
              label: '订单管理',
              children: [
                {
                  id: 113,
                  label: '列表查看'
                },
                {
                  id: 114,
                  label: '查询'
                },
                {
                  id: 114,
                  label: '重置'
                },
                {
                  id: 114,
                  label: '复选框'
                },
                {
                  id: 114,
                  label: '新增订单'
                },
                {
                  id: 114,
                  label: '导出'
                },
                {
                  id: 114,
                  label: '打印'
                },
                {
                  id: 114,
                  label: '操作'
                },
                {
                  id: 114,
                  label: '订单详情'
                },
                {
                  id: 114,
                  label: '编辑'
                },
                {
                  id: 114,
                  label: '作废'
                },
                {
                  id: 114,
                  label: '出库'
                },
                {
                  id: 114,
                  label: '结束'
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  defaultProps: {
    children: 'children',
    label: 'label'
  }
}

}


**js部分:**



mounted() {
this.changeCss() //默认调用此方法将子节点渲染为横向排列
},



methods: {
handleExpand() { // 节点被展开时触发的事件
// 因为该函数执行在renderContent函数之前,所以得加this. n e x t T i c k ( ) t h i s . nextTick() this. nextTick()this.nextTick(() => {
this.changeCss()
})
},
renderContent(h, { node, data, store }) { // 树节点的内容区的渲染 Function
let classname = ‘’
// 由于项目中有三级菜单也有四级级菜单,就要在此做出判断
if (node.level === 4) {
classname = ‘foo’
}
if (node.level === 3 && node.childNodes.length === 0) {
classname = ‘foo’
}
return h(
‘p’,
{
class: classname
},
node.label
)
},
changeCss() { //将子节点横向排列方法
var levelName = document.getElementsByClassName(‘foo’) // levelname是上面的最底层节点的名字
for (var i = 0; i < levelName.length; i++) {
// cssFloat 兼容 ie6-8 styleFloat 兼容ie9及标准浏览器
levelName[i].parentNode.style.cssFloat = ‘left’ // 最底层的节点,包括多选框和名字都让他左浮动
levelName[i].parentNode.style.styleFloat = ‘left’
levelName[i].parentNode.onmouseover = function() {
this.style.backgroundColor = ‘#fff’
}
}

总结

我在成长过程中也是一路摸爬滚打,没有任何人的指点,所以走的很艰难。例如在大三的时候,如果有个学长可以阶段性的指点一二,如果有已经工作的师兄可以告诉我工作上需要什么,我应该前面的三年可以缩短一半;后来去面试bat,失败了有5、6次,每次也不知道具体是什么原因,都是靠面试回忆去猜测可能是哪方面的问题,回来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。

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

image
image

的问题,回来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。

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

[外链图片转存中…(img-GEBdDDyY-1715799414493)]
[外链图片转存中…(img-uoSTJdSc-1715799414494)]

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值