富阳网站seo价格_水浒传真实原型_企业网站设计与推广_推广方案框架

效果如下：

HTML代码部分：

<el-calendar v-model="value"><!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--><template slot="dateCell" slot-scope="{date, data}"><!-- 这里加了周六周天的判断(用于添加不同样式) --><!-- <div :class="(date.getDay()==6 || date.getDay()==0)?'weeked' :'notweeked'">{{ data.day.split('-').slice(2).join('-') }}</div> --><div>{{ data.day.split('-').slice(2).join('-') }}</div><!-- 数组循环 --><div class="cell" v-for="(item,index) in tableData" ><!-- 加数据 --><div v-if="data.day == item.day"><!-- 状态1 --><div style="margin: 5px 0;"><el-tag v-if="item.isStatus1 === 0">待创建</el-tag><el-tag v-if="item.isStatus1 === 1">待提交</el-tag><el-tag v-if="item.isStatus1 === 2">待审核</el-tag><el-tag v-if="item.isStatus1 === 3">已审核</el-tag><el-tag v-if="item.isStatus1 === 4">退回</el-tag><el-tag v-if="item.isStatus1 === 5">重新审核</el-tag><el-tag v-if="item.isStatus1 === 6">月度审核</el-tag></div><!-- 状态2 --><div><el-tag v-if="item.isStatus2 === 0" type="success">正常</el-tag><el-tag v-if="item.isStatus2 === 1" type="danger">非正常</el-tag><el-tag v-if="item.isStatus2 === 2" type="warning">请假</el-tag><el-tag v-if="item.isStatus2 === 3" type="info">旷工</el-tag></div></div></div></template>
</el-calendar>

数据模拟部分：

<script>
export default {data() {return {value: new Date(),tableData: [{ day:'2024-09-05', isStatus1: 0, isStatus2: 1},{ day:'2024-09-10', isStatus1: 4, isStatus2: 3},{ day:'2024-09-11', isStatus1: 2, isStatus2: 1},{ day:'2024-09-12', isStatus1: 3, isStatus2: 2},{ day:'2024-09-13', isStatus1: 1, isStatus2: 4},{ day:'2024-09-14', isStatus1: 0, isStatus2: 0},],}},created(){},methods: {}
}
</script>

至此完成！！！

测试有效！！！感谢支持！！！