element问题总结2

 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">&nbsp</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;
}