web前端开发工程师机试题

面试要求可查看上方链接

效果图

代码

css:

* {margin: 0;padding: 0;list-style: none;text-decoration: none;
}
#app {width: 500px;height: 500px;margin: 100px auto;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;box-sizing: border-box;padding: 30px;
}
#app ul li {margin: 10px 0;
}
#app ul li .span {cursor: pointer;
}
#app ul li ol {display: flex;margin-left: 30px;
}
#app ul li ol li {margin: 30px 30px;
}

index.html ：


<!DOCTYPE html>
<html lang='en'><head><meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Document</title><script src='./js/vue.js'></script><link rel="stylesheet" href="./less/staff.css">
</head><body><!-- v-show="result.department.length > 1  || result.user.length > 1" --><div id='app'><h1>请选择部门/员工：</h1><ul><li v-for="(item,index) in list" :key="item.id"><p><label><input type="checkbox" v-model="item.checkbox" @change="checkAll(item.id)"><span>{{ item.name }}</span></label><span class="span"@click="item.Show_Hide == '-' ? item.Show_Hide = '+' : item.Show_Hide = '-'">{{item.Show_Hide}}</span></p><ol v-show="item.Show_Hide=='-'"><li v-for="(t,i) in item.list_staff" :key="t.id"><label><input type="checkbox" v-model="t.checkbox"><span>{{ t.name }}</span></label></li></ol></li></ul><span> {{ result }} {{ result_ }}</span></div>
</body><script>Vue.config.productionTip = false;  //阻止 vue 在启动时生成生产提示，// 创建Vue实例var vm = new Vue({// 绑定domel: '#app',// 数据data() {return {list: [{id: 1,checkbox: false,name: "部门 1",Show_Hide: "-",list_staff: [{id: 1,checkbox: false,name: "小一"},{id: 2,checkbox: false,name: "小二"},{id: 3,checkbox: false,name: "小三"},]},{id: 2,checkbox: false,name: "部门 2",Show_Hide: "-",list_staff: [{id: 4,checkbox: false,name: "小四"},{id: 5,checkbox: false,name: "小五"},{id: 6,checkbox: false,name: "小六"},]},{id: 3,checkbox: false,name: "部门 3",Show_Hide: "-",list_staff: [{id: 7,checkbox: false,name: "小七"},{id: 8,checkbox: false,name: "小八"},{id: 9,checkbox: false,name: "小九"},]},],// result: {"department": [],"user": []}}},// 事件方法methods: {// 部门全选checkAll(id) {this.list.forEach((item) => {if (item.id == id) {item.list_staff.forEach((item_s) => {// 员工checkbox  = 部门checkboxitem_s.checkbox = item.checkbox})}})}},// 计算computed: {result_: {get() {this.list.filter(item => {// 部门选中时if (item.checkbox) {// 查找部门的id值是否上传，if (this.result.department.indexOf(item.id) == -1) {// 没有就  上传部门的id值this.result.department.push(item.id);// 遍历此部门所有员工item.list_staff.filter(it_em => {// 上级部门选中时 员工的id值上传的话 就删除员工已上传的id值if (this.result.user.indexOf(it_em.id) != -1) {let in_d = this.result.user.indexOf(it_em.id)this.result.user.splice(in_d, 1)}})}// 部门没选中时} else {// 查找部门的id值是否上传，上传就删除已上传的id值if (this.result.department.indexOf(item.id) !== -1) {// 已上传 就删除部門已上传的id值let in_de = this.result.department.indexOf(item.id)this.result.department.splice(in_de, 1)}//  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓  员工单选效果   ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓// 遍历此部门所有员工item.list_staff.filter(it_em => {// 员工选中时if (it_em.checkbox) {// 查找员工的id值是否上传，if (this.result.user.indexOf(it_em.id) == -1) {// 没上传就 员工的id值就上传return this.result.user.push(it_em.id)}// 员工没被选中时} else {// 查找员工的id值是否上传，if (this.result.user.indexOf(it_em.id) !== -1) {// 已上传 就删除员工已上传的id值let in_d = this.result.user.indexOf(it_em.id)this.result.user.splice(in_d, 1)}}})// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑  员工单选效果  ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑}})}}},// 监听watch: {"list": {// 员工全选中==上级部门选中 效果handler: function () {this.list.forEach(item => {// 部门checkbox  =  此部门所有员工checkboxitem.checkbox = item.list_staff.every(it_em => it_em.checkbox);})},deep: true,}}})
</script></html>

深圳乐创互联科技有限公司 - (web前端开发工程师机试题)相关推荐

WEB前端开发工程师面试题
1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? Doctype声明位于文档中的最前面的位置,处于标签之前.此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规 ...
web前端项目实例网站_招聘 | 北京 | tSynsth系联设计建筑设计师 / 室内设计师 / 项目负责人 / WEB前端开发工程师 / 实习生...
关于我们系联设计(Tuning Synesthesia ,tSynsth, TS)是一支由多元背景的设计师与软件工程师组成的国际团队,致力于想法与过程让设计 "可持续". 系联专 ...
Web前端开发工程师必读de设计博客
2019独角兽企业重金招聘Python工程师标准>>> Web设计是一个不断变化的领域,因此掌握最新的发展趋势及技术动向对设计师来说非常重要,无论是学习新技术,还是寻找免费资源与工具 ...
Web前端开发——BAT面试题汇总及答案01
目录: 目录: HTML&CSS篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2.每个 HTML 文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 3 ...
想成为一个Web前端开发工程师，需要掌握哪些知识？
前端工程师已经成为目前互联网企业极具竞争力的人才,为了招聘到优秀的Web前端开发工程师,企业不断的提升薪资水平.因此,有越来越多的人加入到了学习Web前端行列.那么,想成为一名web前端开发工程师需要 ...
想成为一个Web前端开发工程师，需要掌握的详细知识总结
前端工程师已经成为目前互联网企业极具竞争力的人才,企业不断提升薪资水平为了招聘到优秀的Web前端开发工程师.因此,越来越多的人想要学习Web前端.那么呢?Web前端的学习路线是什么? 想成为一个Web ...
Web前端开发工程师到底是干什么的？
Web前端开发工程师其实是查BUG,改BUG,写BUG.哈哈,以上内容纯属开玩笑.事实上,Web前端开发工程师简单地说,就是使用HTML.CSS.JavaScript等技术来实现客户端(手机和电脑)上 ...
如何学习才能成为优秀的Web前端开发工程师？
随着Web前端技术的广泛应用,Web前端开发工程师也成为了热门的岗位之一,并且吸引了很多人想要转行成为Web前端开发工程师.那么如何学习才能成为Web前端开发工程师呢? 如何学习才能成为优秀的Web前 ...
web前端开发工程师的竞争力体现在哪里？
web前端开发工程师的核心竞争力体现诸多方面.这个不可替代性我们可以理解为与其他计算机细分领域.应用场景相比,前端开发的核心优势体现在哪些方面?或者有哪些独特的属性? 直面用户,前端更擅长从用户视角出 ...

深圳乐创互联科技有限公司 - (web前端开发工程师机试题)

web前端开发工程师机试题

效果图

代码

深圳乐创互联科技有限公司 - (web前端开发工程师机试题)相关推荐

最新文章

热门文章