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({
// 绑定dom
el: '#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 = 部门checkbox
item_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 = 此部门所有员工checkbox
item.checkbox = item.list_staff.every(it_em => it_em.checkbox);
})
},
deep: true,
}
}
})
</script>
</html>