element时间日期选择器在日期上增加数字标记显示数字_el-date-picker 框选日期显示有数据-优快云博客

本文介绍了如何在Vue项目中使用el-date-picker组件，并实现日期选择时显示对应数据计数的功能，通过监听日期变化并根据预设数据动态生成CSS类名以显示计数值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：https://blog.youkuaiyun.com/m0_46301672/article/details/128951123

在这里插入图片描述

  <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>