需求中在日期选择器上增加每个天数显示数字的一个标记,后台人员操作时能够清楚的明白每一天的变化,可以通过匹配每一项的日期和数字数量来匹配,通过scss中的for循环生成样式,在通过element中的cellClassName增加类来动态匹配,样式和代码如下:
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
ref="datePicker"
v-model="value1"
type="datetime"
placeholder="选择日期时间"
default-time="10:00:00"
:picker-options="pickerOptions"
/>
</div>
</template>
<script>
export default {
data () {
return {
value1: '',
arr: [
{ date: '2023-2-1', num: '10' },
{ date: '2023-2-2', num: '20' },
{ date: '2023-2-10', num: '2' },
{ date: '2023-2-15', num: '5' },
{ date: '2023-2-16', num: '6' }
],
pickerOptions: {
cellClassName: (data) => {
let _currentData = this.getDate(data)
let _dataObj = {}
this.arr.forEach(item => {
_dataObj[item.date] = item.num
})
console.log(_dataObj[_currentData])
if (_dataObj[_currentData] > -1) {
return `cell-num ${
_dataObj[_currentData] < 100
? 'cell-num-data-' + _dataObj[_currentData]
: 'cell-num-data'
}`
}
}
}
}
},
methods: {
getDate (_nowDate) {
let _nowYears = _nowDate.getFullYear()
let _nowMonth = _nowDate.getMonth() + 1
let _nowDay = _nowDate.getDate()
return `${_nowYears}-${_nowMonth}-${_nowDay}`
}
}
}
</script>
<style lang="scss">
@for $i from 1 through 99 {
.cell-num-data-#{$i} {
&::after {
content: "#{$i}";
display: inline-block;
position: absolute;
font-size: 12px;
color: #FFF;
background-color: #f56c6c;
top: -3px;
right: -6px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 20px;
z-index: 99;
}
}
}
</style>