当前位置：首页 > article >正文

使用 element UI 实现自定义日历

article 2024/11/15 18:36:57

效果如下：

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>

至此完成！！！

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

查看全文

http://www.kler.cn/a/306379.html