国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

element ui el-table表格縱向橫向滾動(dòng)條去除并隱藏空白占位列

這篇具有很好參考價(jià)值的文章主要介紹了element ui el-table表格縱向橫向滾動(dòng)條去除并隱藏空白占位列。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

需求

當(dāng)table內(nèi)容列過多時(shí),可通過height屬性設(shè)置table高度以固定table高度、固定表頭,使table內(nèi)容可以滾動(dòng)
el-table橫向滾動(dòng)條,ui,elementui,el-table

現(xiàn)在需求是右側(cè)滾動(dòng)條不好看,需要去除滾動(dòng)條,并隱藏滾動(dòng)條所占列的位置

// ----------修改elementui表格的默認(rèn)樣式-----------
.el-table__body-wrapper {
  &::-webkit-scrollbar { // 整個(gè)滾動(dòng)條
    width: 0; // 縱向滾動(dòng)條的寬度
    background: rgba(213,215,220,0.3);
    border: none;
  }
  &::-webkit-scrollbar-track { // 滾動(dòng)條軌道
    border: none;
  }
}

// --------------------隱藏table gutter列和內(nèi)容區(qū)右側(cè)的空白
.el-table th.gutter{
  display: none;
  width:0
}
.el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}

.el-table__body{
  width: 100% !important;
}

效果

el-table橫向滾動(dòng)條,ui,elementui,el-table文章來源地址http://www.zghlxwxcb.cn/news/detail-757923.html

到了這里,關(guān)于element ui el-table表格縱向橫向滾動(dòng)條去除并隱藏空白占位列的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • element-ui的table實(shí)現(xiàn)滾動(dòng)加載,涵el-table組件封裝一份

    element-ui的table實(shí)現(xiàn)滾動(dòng)加載,涵el-table組件封裝一份

    重點(diǎn)就是 a d d R o l l L i s t e n e r addRollListener a d d R o l l L i s t e n e r 函數(shù),想快點(diǎn)弄上去看效果的直接弄這個(gè)函數(shù)吧 如果不在mounted中則一定要this.$nextTick(() = this.addRollListener()) 示例代碼 如果你把上面的看過了;只需要在 a d d R o l l L i s t e n e r addRollListener a d d R o l l L i s t e

    2023年04月08日
    瀏覽(34)
  • vue中element-ui表格組件el-table封裝,在table表格中插入圖片

    vue中element-ui表格組件el-table封裝,在table表格中插入圖片

    ????????這次寫的項(xiàng)目是寫后臺(tái)管理系統(tǒng)這部分,對于后臺(tái)管理使用vue寫,用組件的話,table組件用得次數(shù)比較多,可以封裝一個(gè)table組件。 ????????1.如封裝的table組件: ?:prop=\\\"item.prop\\\"??:label=\\\"item.label\\\"是必須要有的,其他的可以根據(jù)自己需要寫 。 2.封裝之后是就是使

    2024年02月15日
    瀏覽(31)
  • vue(element ui )el-table樹形表格展示及數(shù)據(jù)對齊

    vue(element ui )el-table樹形表格展示及數(shù)據(jù)對齊

    注意點(diǎn): el-table配置里 row-key 必須是唯一性 :tree-props=“{ children: ‘relatedPartyChild’ , hasChildren: ‘hasChildren’ }” children配置為后端返回的節(jié)點(diǎn)字段即可

    2024年02月16日
    瀏覽(30)
  • element-ui表格高度自適應(yīng)(el-table 自適應(yīng)高度)

    想讓element-ui的表格 el-table 出現(xiàn)滾動(dòng)條的時(shí)候,如果不做處理就只能是 height=“XXXpx”,給它一個(gè)固定的高度,我們的頁面正常情況下,是不允許出現(xiàn)頁面級滾動(dòng)條的,也是不美觀的,想讓table自適應(yīng)高度并且有滾動(dòng)條,而且不會(huì)出現(xiàn)頁面級滾動(dòng)條,可以這么實(shí)現(xiàn),下面是我寫

    2024年01月17日
    瀏覽(22)
  • Element-UI el-table高度不固定,自適應(yīng)高度顯示滾動(dòng)條

    表格內(nèi)容過多時(shí)顯示滾動(dòng)條:可通過 max-height設(shè)置一個(gè)固定的數(shù)值高度實(shí)現(xiàn),但是項(xiàng)目中的需求是表格的高度不能寫死,要自適應(yīng)高度來顯示滾動(dòng)

    2024年02月11日
    瀏覽(25)
  • Element-ui中表格el-table圖片預(yù)覽效果實(shí)現(xiàn)(非常實(shí)用)

    Element-ui中表格el-table圖片預(yù)覽效果實(shí)現(xiàn)(非常實(shí)用)

    ??作者:計(jì)算機(jī)編程-吉哥 ??簡介:專業(yè)從事JavaWeb程序開發(fā),微信小程序開發(fā),定制化項(xiàng)目、 源碼、代碼講解、文檔撰寫、ppt制作。做自己喜歡的事,生活就是快樂的。 ??心愿:點(diǎn)贊 ?? 收藏 ?評論??? ?? ?文末獲取源碼聯(lián)系 ??先展示效果:? ???使用的是下面這個(gè)插

    2024年02月11日
    瀏覽(35)
  • [element-ui] el-table表格合并 span-method

    element 中表格合并 span-method 函數(shù)詳解

    2024年02月13日
    瀏覽(31)
  • element ui el-table sorttable實(shí)現(xiàn)表格拖拽排序(vuedraggable)

    element ui el-table sorttable實(shí)現(xiàn)表格拖拽排序(vuedraggable)

    如果已經(jīng)安裝了 vuedraggable ,則可以不用安裝 sortablejs

    2024年02月11日
    瀏覽(18)
  • vue element-ui表格(el-table)數(shù)據(jù)導(dǎo)出execl文件

    功能實(shí)現(xiàn):element UI 的el-table數(shù)據(jù)導(dǎo)出為execl文件 使用到插件:xlsx、file-saver exportExecl.js 代碼如下: 頁面代碼如下:

    2024年02月14日
    瀏覽(30)
  • element-ui里el-table表格操作列多橫線怎么解決

    element-ui里el-table表格操作列多橫線怎么解決

    在vue中封裝了element-ui表格,然后使用插槽,fixed定位等,導(dǎo)致樣式出現(xiàn)了錯(cuò)亂 本文就到此結(jié)束了,希望大家共同努力,早日拿下 el?????。 如果文中有不對的地方,或是大家有不同的見解,歡迎指出 ????。 如果大家覺得所有收獲,歡迎一鍵三連????。

    2024年02月11日
    瀏覽(32)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包