el-calendar 日程添加

el-calendar 日程添加_第1张图片

<el-calendar>
                    <!-- 这里使用的是 2.5 slot 语法,对于新项目请使用 2.6 slot 语法-->
                    <template slot="dateCell" slot-scope="{ data }">
                        <div
                            class="data.isSelected ? 'is-selected' : ''"
                            @click="updateConfig(data.day)"
                        >
                            <p>
                                <!--这里原本有动态绑定的class,去掉-->
                                {
     {
      data.day.split('-').slice(1).join('-') }}
                            </p>

                            <span
                                v-for="(item, index) in dealMyDate(data.day)"
                                :key="index"
                            >
                                {
     {
      item.content }}
                            </span>
                        </div>
                    </template>
                </el-calendar>
                
                
  computed: {
     
        /**
         * @Date: 2020-11-19 10:19:40
         * @description: 判断结果时间和单元格的时间是否相等
         * @param {
     *} v 单元格的时间
         */
        dealMyDate() {
     
        //闭包传参
            return function (v) {
     
                let len = this.groupedItems.length
                let num = _.findIndex(this.groupedItems, function (o) {
     
                    return o.day == v
                })
                let daysItems = ''
                if (num != -1) {
     
                    daysItems = this.groupedItems[num].likes
                } else {
     
                    daysItems = []
                }
                return daysItems
            }
        },
    }, 
    
    
    
  resDate: [
                {
      date: '2020-11-20', content: '放假' },
                {
      date: '2020-11-26', content: '去学习vue' },
                {
      date: '2020-11-26', content: '去学习vue' },
                {
      date: '2020-11-26', content: '去学习vue' },
                {
      date: '2020-11-26', content: '去学习vue' },
                {
      date: '2020-11-26', content: '去学习vue' },
                {
      date: '2020-11-26', content: '去学习vue' },
            ],  
 /**
         * @Date: 2020-11-19 10:21:30
         * @description: 后端返回的时间段 根据日期分类成多个list[day{
     likes}]
         * @param {
     *}
         */
        async getTimeConfig() {
     
            // 根据日期分类
            this.groupedItems = _(this.resDate)
                .groupBy((item) => item.date)
                .map((items, day) => {
     
                    return {
     
                        day: day,
                        likes: items,
                    }
                })
                .reverse() // 为了反转数组排序
                .value()
        },                 

你可能感兴趣的:(vue.js)