Element布局实现日历布局

最新推荐文章于 2024-08-18 16:10:18 发布

renpingsheng788

最新推荐文章于 2024-08-18 16:10:18 发布

阅读量971

点赞数

本文链接：https://blog.csdn.net/renpingsheng66/article/details/102830628

版权

本文介绍了如何利用Element的栅格系统创建日历布局，分别从基于Bootstrap的栅格布局和Element的栅格布局两个方面进行讲解，并展示了最终实现的效果。

摘要由CSDN通过智能技术生成

1.基于Bootstrap的栅格布局

<div id="home" style="margin-top: 60px;">
    <div class="col-md-6 col-md-offset-3">
        <el-calendar>
            <template slot="dateCell" slot-scope="{date, data}">
                <div style="width: 100%; height: 100%" @click="dialogVisible = true">
                    <p :class="data.isSelected ? 'is-selected' : ''">
                        {
    { data.day.split('-')[2] }}
                    </p>
                </div>
            </template>
        </el-calendar>
    </div>
    <el-dialog
            title="新增事件"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose">
        <div class="row">
            <div class="col-md-4">
                <form class="form-horizontal">
                    <div class="form-group clearfix ">
                        <label class="col-sm-4 control-label bk-lh30 pt0">工作日期</label>
                        <div class="col-sm-8">
                            <el-date-picker v-model="addDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                                            value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </div>
                    </div>
                </form>
                <form class="form-horizontal">
                    <div class="form-group clearfix ">
                        <label class="col-sm-4 control-label bk-lh30 pt0">工作类别</label>
                        <div class="col-sm-8">
                            <el-select v-model="addJobType" style="width: 100%">
                                <el-option
                                        v-for="item in jobTypeData"
                                        :label="item.key"
                                        :value="item.key">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </form>
                <form class="form-horizontal">
                    <div class="form-group clearfix ">
                        <label class="col-sm-4 control-label bk-lh30 pt0">客户名称</label>
                        <div class="col-sm-8">
                            <el-select v-model="searchCustomer" placeholder="请选择客户" style="width: 100%">
                                <el-option
                                        v-for="item in customerData"
                                        :label="item.bk_username"
                                        :value="item.bk_username">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-md-4">
                <form class="form-horizontal">
                    <div class="form-group clearfix ">
                        <label class="col-sm-4 control-label bk-lh30 pt0">开始时间</label>
                        <div class="col-sm-8">
                            <el-time-select v-model="addStartTime"
                                            :picker-options="{start: '08:00',step: '00:30',end: '23:30'}"></el-time-select>
                        </div>
                    </div>
                </form>
                <form class="form-horizontal">
                    <div class="form-group clearfix ">
                        <label class="col-sm-4 control-label bk-lh30 pt0">事件状态</label>
                        <div class="col-sm-8">
                            <el-select v-model