柒索

一个头脑聪明，五肢发达的男人。

0%

在ElemenUI中使用日历组件el-calendar

发表于
在ElemenUI中使用日历组件el-calendar

引入组件

1
2
3
4
import { Calendar } from 'element-ui'
import 'element-ui/lib/theme-chalk/calendar.css'

Vue.use(Calendar)

组件部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<template>
  <div class="mod-config">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="以日历展示" name="first">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
          <el-form-item>
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-checkbox-group v-model="dataForm.checkValList" @change="handleChecked">
<!--              <el-checkbox v-for="(item,index) in this.$sysDic.otcEventRemindTypeEnumList" :key="index"-->
<!--                           :label="item.value" :value="item.label">{{ item.label }}-->
<!--              </el-checkbox>-->
              <el-checkbox label="type1"><span style="background-color: #FFC7CE">类型1</span></el-checkbox>
              <el-checkbox label="type2"><span style="background-color: #FFEB9C">类型2</span></el-checkbox>
              <el-checkbox label="type3"><span style="background-color: #EDEDED">类型3</span></el-checkbox>
              <el-checkbox label="type4"><span style="background-color: #C6EFCE">类型4</span></el-checkbox>
              <el-checkbox label="type5"><span style="background-color: #DDEBF7">类型5</span></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <el-calendar v-model="dataForm.calValue" class="lar-el-calendar">
          <template
            slot="dateCell"
            slot-scope="{date, data}">
            {{ data.day.split('-').slice(1).join('-') }}
            <div style="width:100%;" v-for="(item,index) in dataList" :key="index">
              <p v-if="(item.eventType == '类型1' && item.recordDate === data.day)" class="type1"
                 @click="isDialog(data)">
                {{ item.code + ':' + item.eventType }}
              </p>
              <p v-if="(item.eventType == '类型2' && item.recordDate === data.day)" class="type2"
                 @click="isDialog(data)">
                {{ item.code + ':' + item.eventType }}
              </p>
              <p v-if="(item.eventType == '类型3' && item.recordDate === data.day)" class="type3"
                 @click="isDialog(data)">
                {{ item.code + ':' + item.eventType }}
              </p>
              <p v-if="(item.eventType == '类型4' && item.recordDate === data.day)" class="type4"
                 @click="isDialog(data)">
                {{ item.code + ':' + item.eventType }}
              </p>
              <p v-if="(item.eventType == '类型5' && item.recordDate === data.day)" class="type5"
                 @click="isDialog(data)">
                {{ item.code + ':' + item.eventType }}
              </p>
            </div>
          </template>
        </el-calendar >

      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="日历详情"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleDialogClose">
      <el-row :gutter="20" style="text-align: center">
        <el-col :span="12">
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

样式部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<style lang="scss">
<style lang="scss">
.type1 {
  display: inline-block;
  background-color: #FFEB9C;
  color: black;
  margin:1px 0px;

}

.type2 {
  display: inline-block;
  background-color: #C6EFCE;
  color: black;
  margin:1px 0px;
}

.type3 {
  display: inline-block;
  background-color: #EDEDED;
  color: black;
  margin:1px 0px;
}

.type4 {
  display: inline-block;
  background-color: #DDEBF7;
  color: black;
  margin:1px 0px;
}

.type5 {
  display: inline-block;
  background-color: #FFC7CE;
  color: black;
  margin:1px 0px;
}


.lar-el-calendar {
  //
  .el-calendar-table td.is-selected {
    //background-color: #a2e5a2 !important;
  }
  .el-calendar-table td {
    //background-color: black !important;
    overflow-x: auto;
  }
  .el-calendar-table td .el-calendar-day:hover {
    //background-color: black !important;
  }
  .el-calendar-day {

  }
  .el-calendar-table__row {

  }
  //.current.is-today {
  //  background: green;
  //  color: #fff;
  //}
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: black;
}
//.el-carousel__item h3 {
//  color: #475669;
//  font-size: 14px;
//  opacity: 0.75;
//  line-height: 200px;
//  margin: 0;
//}
//.el-carousel__item:nth-child(2n) {
//  background-color: #99a9bf;
//}
//.el-carousel__item:nth-child(2n + 1) {
//  background-color: #d3dce6;
//}
//.el-calendar {
//  width: 500px;
//  height: 600px;
//}
</style>

函数部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<script>
// import * as utils from '@/utils/utils'
export default {
  data () {
    return {
      dataForm: {
        calValue: new Date(),
        checkValList: [],
        checkOptions: []
      },
      isIndeterminate: true,
      checkAll: false,
      infoForm: {},
      activeName: 'first',
      tableHeight: 0,
      dataList: [],
      pageIndex: 1,
      pageSize: 50,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      dialogVisible: false
    }
  },
  components: {},
  activated () {
    this.$sysDic.otcEventRemindTypeEnumList.forEach(item => {
      this.dataForm.checkOptions.push(item.value)
    })

    this.getDataList()
  },
  watch: {
    // 监测日期变化  更新数据
    'dataForm.calValue': function () {
      this.getDataList()
    }
  },
  methods: {
    calTableHeight () {
      this.tableHeight = window.innerHeight - this.$refs['tableData'].$el.offsetTop - 169
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('xxx'),
        method: 'get',
        params: this.$http.adornParams({
          'checked': this.dataForm.checkValList.join(','),
          'calValue': this.getDateStr(this.dataForm.calValue)
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.list
          this.calTableHeight()
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    handleClick (tab, event) {
      switch (tab.name) {
        case 'first':
          this.getDataList()
          break
      }
    },
    dataHandler (data) {
      console.log(data.day)
    },
    isDialog (data) {
      // 预留展示弹窗 改为True即可
      this.dialogVisible = false
      // console.log(data)
    },
    handleDialogClose () {
    },
    // 全选
    handleCheckAllChange (val) {
      this.dataForm.checkValList = val ? this.dataForm.checkOptions : []
      this.isIndeterminate = false
    },
    // 多选框点击
    handleChecked (val) {
      this.getDataList()
      let checkedCount = val.length
      this.checkAll = checkedCount === this.dataForm.checkValList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkValList.length
    }
  }
}
</script>