el-calendar 日历控件内容自定义

最新推荐文章于 2024-07-01 15:20:09 发布

代意如

最新推荐文章于 2024-07-01 15:20:09 发布

阅读量949

点赞数 1

文章标签：前端 javascript elementui

本文链接：https://blog.csdn.net/weixin_52137696/article/details/129852168

版权

// html
<el-calendar>
   <template slot='dateCell' slot-scope='{date,data}'>
        <div :class="data.isSelected?'is-selected' :''" @click="callItem(data.day)">
            <p>
                {{data.day.split('-').slice(1).join('-')}}
                <br/>
                <span>{{dealMyDate(data.day).title}}</span>
            </p>
        </div>
   </template>
</el-calendar>

//JS

// 数据转换
dealMyDate(v){
    console.log(v)
    let len =thie.resDate.length;//resDate为后台返回数据
    let res =[]
    for (let i=0;i<len;i++{
        if(this.resDate[i].scheduleDate == v){
            res.title=this.resDate[i].title
            res.id=this.resDate[i].id
            res.content=this.resDate[i].content
        }
    }
}

// 点击查看详情
calItem(d){
    console.log(this.dealMyDate(d)
}