vue+element控件之間間距太大問題及解決

更新時(shí)間：2023年06月08日 10:22:28 作者：guohongyanghy

這篇文章主要介紹了vue+element控件之間間距太大問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue+element控件之間間距太大問題

減小控件之間的間距

style="float:left" ，float:right，等等，可以使某個(gè)控件居左顯示

margin-top，margin-bottom，margin-left，margin-right可以控制控件之間的間距，element的控件之間間距較大，可以將這些值設(shè)置成負(fù)數(shù)來縮小間距

style="margin-top:-5px"

style="margin-bottom:-5px"

vue+element遇到的問題

1.用lang=“scss” 寫樣式

修改element的默認(rèn)樣式，用 ::v-deep 樣式穿透

<style lang="scss" scoped>
    ::v-deep .el-input-group__append {
        background-color: #5094ff;
        border: 1px solid #5094ff;
      }
</style>

用lang=“less” 寫樣式，修改element的默認(rèn)樣式，用 /deep/ 樣式穿透

2.element 分頁(yè)符功能模塊隱藏以及位置調(diào)換

layout布局，修改順序可以改變功能模塊的位置

3.element 表單使用fixed固定行列導(dǎo)致錯(cuò)位問題

出現(xiàn)的原因是 el-scrollbar__wrap::-webkit-scrollbar滾動(dòng)條和表格自己的滾動(dòng)條el-table__body-wrapper::-webkit-scrollbar 的寬度和高度不一致

解決：

//把兩個(gè)寬高設(shè)置一樣，不一定是30
.el-scrollbar__wrap::-webkit-scrollbar{
   width: 30px; 
   height: 30px;
}
------------------------------------------
.el-table__body-wrapper::-webkit-scrollbar {
    width: 30px; 
    height: 30px; 
  }
 //設(shè)置表格滾動(dòng)條樣式
.el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #dddee0;
    border-radius: 8px;
  }

4.element的table中input的blur事件沖突問題

問題描述：

1.在table中有一列有input框，input框用的是blur事件，失去焦點(diǎn)，觸發(fā)事件修改value;

2.圖中【說明】這列，因?yàn)閮?nèi)容太多，使用了show-overflow-tooltip （當(dāng)內(nèi)容過長(zhǎng)被隱藏時(shí)顯示），就是鼠標(biāo)放上去顯示全部?jī)?nèi)容

問題來了：當(dāng)input框內(nèi)容被修改，但是沒有失去焦點(diǎn)沒有觸發(fā)事件，此時(shí)將鼠標(biāo)移到到【說明】這列，input框內(nèi)容將被還原

造成原因：

猜測(cè)：：可能?。。。簍able為了顯示這個(gè)內(nèi)容，重新獲取了一次數(shù)據(jù)，刷新這列數(shù)據(jù)，相當(dāng)于頁(yè)面重新加載了一次數(shù)據(jù)，所以input框內(nèi)容被還原了

解決辦法：

如果想要堅(jiān)持input使用blur事件，那就只能去掉show-overflow-tooltip屬性；但是又想顯示長(zhǎng)內(nèi)容，建議使用 element-ui的Tooltip 文字提示組件：常用于展示鼠標(biāo) hover 時(shí)的提示信息。

5.el-scrollbar 滾動(dòng)條自定義

首先要修改瀏覽器自帶滾動(dòng)條樣式

//設(shè)置瀏覽器滾動(dòng)條長(zhǎng)寬
 ::-webkit-scrollbar {
     width: 6px;//6px剛好讓瀏覽器默認(rèn)的滾動(dòng)條擠出右邊，看不見（除了最大的那條滾動(dòng)條）
     height: 6px;
 }
//設(shè)置瀏覽器滾動(dòng)條的背景顏色
::-webkit-scrollbar-thumb {
    background-color: #eee;
    border-radius: 3px;
}

修改element修改滾動(dòng)條

//高度撐滿
.el-scrollbar {
    height: 100%;
}
//element-ui的自定義的滾動(dòng)條 把原生的滾動(dòng)條擠到看不到地方
.el-scrollbar__wrap {
    overflow: scroll;
    這個(gè)兩個(gè)添加了會(huì)讓內(nèi)容展示不完，實(shí)測(cè)不建議添加
    //width: 110%;
    //height: 120%;   
}