在vue2中使用el-date-picker组件,它可以接受一个数组,数组内是若干日期,例如dates: ["2023-05-23", "2023-05-22", "2023-05-19"],现在希望在组件的日期下拉框中,在数组对应的日期下面添加一个蓝色的小圆点(并不影响组件的整体格式),仅用作提示效果,请给出代码示例
时间: 2024-02-16 20:03:28 浏览: 135
你可以通过 `el-date-picker` 组件的 `cell-style` 属性来实现在日期下面添加小圆点的效果。具体代码如下:
```html
<template>
<el-date-picker
v-model="date"
type="date"
:cell-style="cellStyle"
:picker-options="pickerOptions"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
date: "",
dates: ["2023-05-23", "2023-05-22", "2023-05-19"]
};
},
computed: {
pickerOptions() {
return {
disabledDate: time => {
const disabled = this.dates.some(date => {
return (
new Date(date).toDateString() ===
new Date(time).toDateString()
);
});
return disabled;
}
};
},
cellStyle() {
return (date, type) => {
if (type === "date") {
const isDisabled = this.dates.some(disabledDate => {
return (
new Date(disabledDate).toDateString() ===
new Date(date).toDateString()
);
});
return isDisabled ? "background-color: #f5f5f5; position: relative;" : "";
}
};
}
}
};
</script>
```
在 `pickerOptions` 计算属性中,我们使用 `disabledDate` 函数将 `dates` 数组中的日期置为不可选状态。
在 `cellStyle` 计算属性中,我们使用 `some` 方法来判断当前日期是否在 `dates` 数组中,如果是则给单元格添加 `background-color` 样式,并设置 `position: relative`,然后在单元格内部添加一个蓝色小圆点的元素,代码如下:
```css
.el-date-table td div.disabled-cell {
position: relative;
}
.el-date-table td div.disabled-cell::after {
content: "";
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #409eff;
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
}
```
这样就可以实现在日期下面添加蓝色小圆点的效果了。
阅读全文
相关推荐
















