vue 考勤表格
时间: 2023-06-29 16:11:47 浏览: 86
可以使用 Vue.js 和 Element UI 来实现考勤表格,以下是一个简单的示例代码:
```html
<template>
<div>
<el-table :data="attendances" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
<span v-if="scope.row.status === 'present'" style="color: green">出勤</span>
<span v-else-if="scope.row.status === 'absent'" style="color: red">缺勤</span>
<span v-else-if="scope.row.status === 'late'" style="color: orange">迟到</span>
<span v-else-if="scope.row.status === 'early_leave'" style="color: blue">早退</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
attendances: [
{ name: '张三', date: '2021-08-01', status: 'present' },
{ name: '李四', date: '2021-08-01', status: 'absent' },
{ name: '王五', date: '2021-08-01', status: 'late' },
{ name: '赵六', date: '2021-08-01', status: 'early_leave' },
// 其他考勤数据
],
};
},
};
</script>
```
在这个示例中,我们使用 Element UI 的 `el-table` 和 `el-table-column` 组件来显示考勤数据。`attendances` 数组中包含每个员工每天的考勤情况,`el-table` 的 `:data` 属性绑定到这个数组上,`el-table-column` 的 `prop` 属性分别对应每个员工的姓名、日期和状态,我们使用 `slot-scope` 来自定义状态列的显示。你可以根据实际需求修改这个示例来生成你需要的考勤表格。