element-ui使用日历控件,如何在指定的日期显示一个小点
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
效果图如下:
代码:
<!--日历-->
<el-calendar v-model="value" style="height:620px" class="el_cal_out">
<template slot="dateCell" slot-scope="{ data}">
<p style="margin:0px">
{{ data.day.split('-').slice(2).join() }}<br />
<!--标记-->
<div v-for="(i, index) in dayTime" :key="index">
<div v-if="data.day==i" class="budge"></div>
</div>
</p>
</template>
</el-calendar>
<script>
export default {
data () {
dayTime: ["2021-03-28", "2021-01-26", "2021-03-16"]
}
}
</script>
<style scoped>
.budge {
width: 8px;
height: 8px;
background: #e6a23c;
border-radius: 50%;
margin: 0 auto;
margin-top: 10px;
}
</style >
**
**
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)