Contents of this article
In the development of the vue project, we intend to maintain the consistency and coordination of the color, modify the default selected color in the el-date-picker drop-down list, the color of the selection box, if you only modify the css, you cannot change the color, you need to do Make certain changes.
Modified effect
Sample source code (52 lines in total)
/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2022-08-21
*/
<template>
<div class="container">
<h3>vue+elementUI：el-date-picker 修改选中项的颜色 </h3>
<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期"
:append-to-body='false'>
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
value1: ''
}
}
}
</script>
<style scoped>
/deep/ .el-date-table td.current:not(.disabled) span {
color: #FFF;
background-color: #ff0000;
}
/deep/ .el-date-table td.today span {
color: #ff0000;
font-weight: 700;
}
/deep/ .el-input.is-active .el-input__inner,/deep/ .el-input__inner:focus {
border-color: #ff0000;
outline: 0;
}
.container {
width: 1000px;
height: 540px;
margin: 50px auto;
border: 1px solid orange;
}
.author{
line-height: 30px; border-bottom:1px solid #ddd; margin-bottom: 20px;}
</style>
Core content steps:
(1) Change the style
/deep/ .el-date-table td.current:not(.disabled) span {
color: #FFF;
background-color: #ff0000;
}
/deep/ .el-date-table td.today span {
color: #ff0000;
font-weight: 700;
}
/deep/ .el-input.is-active .el-input__inner,/deep/ .el-input__inner:focus {
border-color: #ff0000;
outline: 0;
}
(2) Add parameters
It will not take effect after modification, add attribute to el-date-picker: append-to-body='false'.
(append-to-body: Whether to insert the pop-up box into the body element. When there is a problem with the positioning of the pop-up box, this property can be set to false)
column goal
Under the control of the joint technology stack of vue and element UI, this column provides effective source code examples and introduction of information points to achieve flexible use.
(1) Provide some basic operations of vue2: installation, reference, template use, computed, watch, life cycle (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated, errorCaptured, components,), $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else , v-else-if, v-on, v-pre, v-cloak, v-once, v-model, v-html, v-text, keep-alive, slot-scope, filters, v-bind,. stop, .native, directives, mixins, render, internationalization, Vue Router, etc.
（2）提供element UI的经典操作：安装，引用，国际化，el-row，el-col，el-button，el-link，el-radio，el-checkbox，el-input，el-select, el -cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form , el-table, el-tree, el-pagination, el-badge, el-avatar, el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $ message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el- popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等