20.隐藏el-calendar 的多余的日子
/deep/ .el-calendar-table:not(.is-range) td.next {
display: none;
}
/deep/ .el-calendar-table:not(.is-range) td.prev {
visibility: hidden;
}
/deep/ .el-calendar-table td {
border: 1px solid #dfe6ec;
}
21.点击今天,上个月,下个月的时候,触发事件
handleCalender() { // 加载数据,目前展示所有数据
this.$nextTick(() => {
let prevBtn1 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');// 点击上个月
prevBtn1.addEventListener('click',() => {
console.log('上个月');
})
let prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)'); // 点击上个月
prevBtn2.addEventListener('click',() => {
console.log('今天');
})
let prevBtn3 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');// 点击下个月
prevBtn3.addEventListener('click',() => {
console.log('下个月');
})
})
}
22.两个el-col直接加上竖线,高度根据最高的来
1.在el-row上加上 type="flex"
2.设置 <div class="separator"></div>
3.css: 重点align-self: stretch; 高度自适应
.separator {
position: relative;
width: 1px; /* 竖线宽度 */
background-color: #ccc; /* 竖线颜色 */
margin: 0 10px; /* 调整竖线与列的间距 */
align-self: stretch; /* 高度自适应 */
}
22-1.el-row el-col里面高度不一致的问题
el-row,el-col布局页面的时候会因为el-col的内容高度不统一,造成布局混。
解决方案就是在el-row中添加type=“flex”。
<el-row type="flex">
<el-col :span="3" style="border-right: 1px solid #1890ff;">
<div style="height: 100px;"></div>
</el-col>
<el-col :span="21">
<div style="height: 200px;"></div>
</el-col>
</el-row>
23.滚动轴滚到最下面
方法一
原理:这两个属性相等,滚动轴就会到滚轮下
Element.scrollTop
属性可以获取或设置一个元素的内容垂直滚动的像素数。
Element.scrollHeight
只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容。
<el-input id="databaseCapacityTextareaId" v-model="executionResults" type="textarea" :rows="25" resize="none" readonly/>
const textarea = document.getElementById('databaseCapacityTextareaId');
textarea.scrollTop = textarea.scrollHeight;
方法二
利用DIV的scrollIntoView方法,将最底端滚动到可视位置 [list=1]<script
<div style="width:500px;overflow:auto">
<div id="msg" style="overflow:hidden;width:480px;"></div>
<div id="msg_end" style="height:0px; overflow:hidden"></div>
</div>
function onGetMessage(context) {
let msg= document.getElementById('msg');
let msg_end= document.getElementById('msg_end');
msg.innerHTML+=context;
msg_end.scrollIntoView();
}
方法三
使用锚标记要滚动到的位置,然后通过click方法模拟点击滚动到锚所在位置
<div style="width:500px;overflow:auto">
<div id="msg" style="overflow:hidden;width:480px;"></div>
<div>
<a id="msg_end" name="1" href="#1"> </a>
</div>
</div>
function onGetMessage(context) {
let msg= document.getElementById('msg');
let msg_end= document.getElementById('msg_end');
msg.innerHTML+=context;
msg_end.click();
}
实现滚轮打字
generateExecution(data) {
this.$nextTick(() => {
setTimeout(() => {
const arr = data.split('\n');
// 延时1毫秒等待上方循环渲染完成
for (let i = 0; i < arr.length; i++) {
setTimeout(() => {
this.executionResults = this.executionResults.concat(arr[i]).concat('\n')
setTimeout(() => {
const textarea = document.getElementById('databaseCapacityTextareaId');
textarea.scrollTop = textarea.scrollHeight;
}, 1)
}, i * 100)
}
}, 500)
})
},
24.el-int输入不上 ($forceUpdate())
<el-input v-model="form.param[index]" @input="($event) => $forceUpdate()"></el-input>
25.element Descriptions 内容超出隐藏 Tooltip展示完整内容
使用 el-descriptions 时,可能会出现内容过长导致换行的情况
当内容过长时会隐藏超出部分,鼠标移上去Tooltip展示全部内容,内容未超出的,鼠标移上去不展示Tooltip
组件代码
<template>
<el-tooltip :content="value" :disabled="tooltipShow" placement="top-start">
<span ref="content" @mouseover="isShowTooltip">{{value}}</span>
</el-tooltip>
</template>
<script>
export default {
name: 'DescriptionsTooltip',
props: ['value'],
data () {
return {
tooltipShow: false
}
},
methods: {
isShowTooltip () {
const bool = this.$refs.content.offsetWidth < this.$refs.content.parentNode.offsetWidth
this.tooltipShow = bool
}
}
}
</script>
<style scoped>
</style>
组件使用
<el-descriptions>
<el-descriptions-item label="内容超出隐藏">
<descriptions-tooltip :value="'好长好长好长好长好长好长好长好长好长好长好长好长一段文字'"></descriptions-tooltip>
</el-descriptions-item>
<el-descriptions-item label="未超出无tooltip提示">
<descriptions-tooltip :value="'不是很长的一段文字'"></descriptions-tooltip>
</el-descriptions-item>
</el-descriptions>
CSS部分
哪里用到组件 css 写到哪里,不是将 css 放到组件中
.el-descriptions__body .el-descriptions__table {
white-space: nowrap;
}
.el-descriptions-item__content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 8px;
}
26.修改element下拉框样式
.btn-back-select {
position: absolute;
top: -0.2rem;
right: 15rem;
/deep/ .el-input__inner{
color:#eee;
border-color: #00fff6;
background-color: rgba(1, 28, 82, 0.8);
}
/deep/ .el-select-dropdown__list {
border: none;
background-color: rgba(1, 28, 82, 0.8);
}
/deep/ .el-select-dropdown {
border: none;
}
/deep/ .popper__arrow::after {
border-bottom-color: rgba(1, 28, 82, 0.8);
}
/deep/ .el-select-dropdown__item {
color:#eee;
border-color: #00fff6;
background-color: rgba(1, 28, 82, 0.8);
}
/deep/ .el-select-dropdown__item.hover,
/deep/ .el-select-dropdown__item:hover{
color:#00D3E9;
background-color: #0F3360;
}
}