某公司要搬到新的大厦,需要安排员工的新座位。共用100个座位,90名员工,vue代码实现
时间: 2024-03-27 07:40:40 浏览: 20
好的,以下是一个简单的 Vue 代码实现,用于分配座位。我使用了一个数组来表示座位,另一个数组表示员工。这里假设座位是按照从左到右,从上到下的顺序排列的,员工是按照数组中的顺序进行分配座位的。
```
<template>
<div>
<h2>员工座位分配</h2>
<div class="seats">
<div v-for="(seat, index) in seats" :key="index" class="seat" :class="{ occupied: seat }">
{{ seat ? seat : '空座位' }}
</div>
</div>
<div class="employees">
<h3>员工列表</h3>
<div v-for="(employee, index) in employees" :key="index" class="employee">
{{ employee }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
seats: new Array(100).fill(null),
employees: [
'员工1',
'员工2',
'员工3',
// ... 这里可以添加更多员工
'员工90'
]
}
},
mounted() {
this.assignSeats()
},
methods: {
assignSeats() {
let seats = [...this.seats]
let employees = [...this.employees]
employees.forEach((employee, index) => {
let randomIndex = Math.floor(Math.random() * seats.length)
seats[randomIndex] = employee
seats.splice(randomIndex, 1)
})
this.seats = seats
}
}
}
</script>
<style>
.seats {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.seat {
width: 50px;
height: 50px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
margin-right: 10px;
margin-bottom: 10px;
}
.occupied {
background-color: #ccc;
}
.employees {
display: flex;
flex-wrap: wrap;
}
.employee {
width: 100px;
height: 50px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
margin-right: 10px;
margin-bottom: 10px;
}
</style>
```
这个代码实现中,我们先定义了一个 `seats` 数组和一个 `employees` 数组。在 `assignSeats` 方法中,我们使用 `forEach` 循环遍历 `employees` 数组,每次随机选择一个 `seats` 数组的下标,将员工分配到该座位上。分配完毕后,我们将 `seats` 数组更新为已分配的座位数组。最后,在 Vue 组件的 `mounted` 钩子函数中,我们调用 `assignSeats` 方法来完成座位分配。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)