element-UI?el-table樹(shù)形數(shù)據(jù)?修改小三角圖標(biāo)方式
element-UI el-table樹(shù)形數(shù)據(jù) 修改小三角圖標(biāo)
el-table樹(shù)形數(shù)據(jù) 默認(rèn)樣式
有下級(jí)沒(méi)展開(kāi)是? 有下級(jí)展開(kāi)了是? 沒(méi)有下級(jí)的前面什么符號(hào)也沒(méi)有。
更改成自定義樣式
因?yàn)槭莢ue的 <style scoped>內(nèi)寫(xiě)CSS 樣式,所以需要添加 /deep/ 進(jìn)行穿透
.el-tree /deep/ .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } //有子節(jié)點(diǎn) 且未展開(kāi) .el-table/deep/ .el-icon-arrow-right:before { background: url('./images/folder.png') no-repeat 0 3px; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } //有子節(jié)點(diǎn) 且已展開(kāi) .el-table/deep/ .el-table__expand-icon--expanded { .el-icon-arrow-right:before { background: url('./images/folderOpen2.png') no-repeat 0 3px; content: ''; display: block; width: 15px; height: 20px; font-size: 18px; background-size: 21px; } } //沒(méi)有子節(jié)點(diǎn) .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before .el-table/deep/.el-table__placeholder::before { background: url('./images/file.png') no-repeat 0 3px; content: ''; display: block; width: 16px; height: 18px; font-size: 16px; background-size: 16px; }
點(diǎn)擊打開(kāi)子節(jié)點(diǎn)時(shí)小圖標(biāo)會(huì)旋轉(zhuǎn),沒(méi)找到怎么解決,使用了一張左旋90°的圖片
圖片來(lái)自 Iconfont-阿里巴巴矢量圖標(biāo)庫(kù)
element-UI 修改默認(rèn)的一些樣式
variables.scss 文件:設(shè)置了一些基礎(chǔ)配置的變量
/** ?* @description 全局主題變量配置 ?*/ /* stylelint-disable */ @charset "utf-8"; $theme-color: #3370ff; // 主內(nèi)容區(qū)最小寬度 $base-content-min-width: 1200px; //框架默認(rèn)主題色 $base-color-default: #3370ff; //默認(rèn)層級(jí) $base-z-index: 999; //橫向布局縱向布局時(shí)菜單背景色 $base-menu-background: #001529; //菜單文字顏色 $base-menu-color: hsla(0, 0%, 100%, 0.95); //菜單選中文字顏色 $base-menu-color-active: rgba(255, 255, 255, 0.95); //菜單選中背景色 $base-menu-background-active: $base-color-default; //標(biāo)題顏色 $base-title-color: #fff; //字體大小配置 $base-font-size-small: 12px; $base-font-size-default: 13px; $base-font-size-big: 16px; $base-font-size-bigger: 18px; $base-font-size-max: 22px; $base-font-color: #606266; $base-color-blue: $base-color-default; $base-color-green: #3370ff; $base-color-white: #fff; $base-color-black: #000; $base-color-yellow: #ffba00; $base-color-orange: #ff6700; $base-color-red: #ff4d4f; $base-color-gray: rgba(0, 0, 0, 0.65); $base-main-width: 1279px; $base-border-radius: 2px; $base-border-color: #dcdfe6; //輸入框高度 $base-input-height: 32px; //默認(rèn)paddiing $base-padding: 10px; //默認(rèn)陰影 $base-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); //橫向布局時(shí)top-bar、logo、一級(jí)菜單的高度 $base-top-bar-height: 65px; //縱向布局時(shí)logo的高度 $base-logo-height: 75px; //頂部nav-bar的高度 $base-nav-bar-height: 60px; //頂部多標(biāo)簽頁(yè)tags-bar的高度 $base-tags-bar-height: 55px; //頂部多標(biāo)簽頁(yè)tags-bar中每一個(gè)item的高度 $base-tag-item-height: 34px; //菜單li標(biāo)簽的高度 $base-menu-item-height: 50px; //app-main的高度 $base-app-main-height: calc( ? ? ? ? 100vh - #{$base-nav-bar-height} - #{$base-tags-bar-height} - #{$base-padding} - 56px - 20px ); //縱向布局時(shí)左側(cè)導(dǎo)航未折疊時(shí)的寬度 $base-left-menu-width: 230px; //縱向布局時(shí)左側(cè)導(dǎo)航未折疊時(shí)右側(cè)內(nèi)容的寬度 $base-right-content-width: calc(100% - #{$base-left-menu-width}); //縱向布局時(shí)左側(cè)導(dǎo)航已折疊時(shí)的寬度 $base-left-menu-width-min: 65px; //縱向布局時(shí)左側(cè)導(dǎo)航已折疊時(shí)右側(cè)內(nèi)容的寬度 $base-right-content-width-min: calc(100% - #{$base-left-menu-width-min}); //默認(rèn)動(dòng)畫(huà) $base-transition: all 0.2s; //默認(rèn)動(dòng)畫(huà)時(shí)長(zhǎng) $base-transition-time: 0.2s; ? :export { ? //菜單文字顏色變量導(dǎo)出 ? menu-color: $base-menu-color; ? //菜單選中文字顏色變量導(dǎo)出 ? menu-color-active: $base-menu-color-active; ? //菜單背景色變量導(dǎo)出 ? menu-background: $base-menu-background; ? //菜單選中背景色變量導(dǎo)出 ? menu-background-active: $base-menu-background-active; ? //多標(biāo)簽頁(yè)選中背景色變量導(dǎo)出 ? tag-background-active: $base-color-blue; ? //默認(rèn)按鈕背景色變量導(dǎo)出 ? button-background: $theme-color; ? //分頁(yè)選中背景色變量導(dǎo)出 ? pagination-background-active: $base-color-blue; ? theme-color: $theme-color; ? title-color: $base-title-color; } ? @mixin text-point { ? white-space: nowrap; ? overflow: hidden; ? text-overflow: ellipsis; } ? @mixin begin-point { ? content: ""; ? border-radius: 3px; ? width: 6px !important; ? height: 6px; ? margin-right: 8px; ? position: absolute; ? top: 50%; ? transform: translateY(-50%); ? left: -3px; ? z-index: 999999; } ? @mixin no-scrollbar { ? &::-webkit-scrollbar { ? ? display: none; /* Chrome Safari */ ? } ? -ms-overflow-style: none; /* IE 10+ */ ? scrollbar-width: none; /* Firefox */ }
common.scss 文件:修改了element-ui 的一些組件的默認(rèn)樣式,方便大家找對(duì)應(yīng)組價(jià)的類(lèi)名
@charset "utf-8"; @import "./variables.scss"; @mixin scrollbar { max-height: 88vh; margin-bottom: 0.5vh; overflow-y: auto; &::-webkit-scrollbar { width: 0; height: 0; background: transparent; } &::-webkit-scrollbar-thumb { background-color: rgba(144, 147, 153, 0.3); border-radius: 10px; } &::-webkit-scrollbar-thumb:hover { background-color: rgba(144, 147, 153, 0.3); } } @mixin base-scrollbar { &::-webkit-scrollbar { width: 8px; height: 8px; } &::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.1); background-clip: padding-box; border: 2px solid transparent; border-radius: 7px; } &::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.1); } &::-webkit-scrollbar-track { background-color: transparent; } &::-webkit-scrollbar-track:hover { background-color: #f8fafc; } } img { object-fit: cover; } .paddingTop48 { padding-top: 56px; // height: 100%; } .margin_right_20 { margin-right: 20px; } .content-wrap { box-sizing: border-box; background: #fff; height: -o-calc(100vh - 56px); height: -moz-calc(100vh - 56px); height: -webkit-calc(100vh - 56px); height: calc(100vh - 56px); } .aside-box { overflow: auto; width: 200px !important; height: calc(100vh - 82px); background: #363d44; // padding: 30px 20px; .aside-search { margin-bottom: 10px; } } //火狐瀏覽器滾動(dòng)條兼容 .aside-box { scrollbar-color: rgba(0, 0, 0, 0.4) #eee; //滾動(dòng)條軌道顏色 滾動(dòng)條滑塊的顏色 scrollbar-width: thin; //thin模式下滾動(dòng)條兩端的三角按鈕會(huì)消失 } //谷歌瀏覽器滾動(dòng)條兼容 .aside-box::-webkit-scrollbar { //滾動(dòng)條整體部分 width: 10px; height: 10px; background-color: #eee; } .aside-box::-webkit-scrollbar-track { //滾動(dòng)條的軌道(里面裝有Thumb) background-color: transparent; } .aside-box::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.4); //滾動(dòng)條里面的小方塊 background-clip: padding-box; border: 1px solid transparent; border-radius: 7px; } // 設(shè)置瀏覽器滾動(dòng)條樣式 ::-webkit-scrollbar { width: 8px; height: 10px; background-color: #fff; } ::-webkit-scrollbar-thumb { display: block; min-height: 12px; min-width: 8px; border-radius: 6px; background-color: rgb(217, 217, 217); } ::-webkit-scrollbar-thumb:hover { display: block; min-height: 12px; min-width: 8px; border-radius: 6px; background-color: rgb(159, 159, 159); } // 設(shè)置瀏覽器滾動(dòng)條樣式 //::-webkit-scrollbar-button 滾動(dòng)條的軌道的兩端按鈕,允許通過(guò)點(diǎn)擊微調(diào)小方塊的位置。 //::-webkit-scrollbar-track-piece 內(nèi)層軌道,滾動(dòng)條中間部分(除去) //::-webkit-scrollbar-corner 邊角,即兩個(gè)滾動(dòng)條的交匯處的小方塊 //::-webkit-resizer 兩個(gè)滾動(dòng)條的交匯處上用于通過(guò)拖動(dòng)調(diào)整元素大小的小控件 body { position: relative; height: 100vh; min-width: 1000px; padding: 0; margin: 0; font-size: $base-font-size-default; background: #f5f6f7; @include base-scrollbar; div { @include base-scrollbar; } } .el-container.content-container { box-sizing: content-box; } /* 全局按鈕樣式 */ .btn-color { color: #fff; background-color: $theme-color; border-color: $theme-color; } .btn-color:hover, .btn-color:focus { color: #fff; background-color: $theme-color; border-color: $theme-color; } /* 默認(rèn)按鈕樣式 */ .el-button--default { color: $theme-color; border-color: $theme-color; } .el-button--default:active, .el-button--default:hover, .el-button--default:focus { color: $theme-color; background: #fff; border-color: $theme-color; } // /* 成功按鈕樣式 */ .el-button--success, .el-button--primary { color: #fff; background-color: $theme-color !important; border-color: $theme-color !important; } .el-button--success:hover, .el-button--success:focus, .el-button--primary:hover, .el-button--primary:focus { color: #fff; background-color: $theme-color; border-color: $theme-color; } // /* 文字按鈕樣式 */ .el-button--text { color: $theme-color; } .el-button--text:active, .el-button--text:hover, .el-button--text:focus { color: $theme-color; } /* 時(shí)間面板選中項(xiàng)顏色 */ .el-date-table td.current:not(.disabled) span { color: #fff !important; background-color: $theme-color !important; } .el-date-table td.today span { color: $theme-color !important; } .el-date-table td.today.start-date span, .el-date-table td.today.end-date span { color: #fff !important; } .el-date-table td.available:hover { color: $theme-color !important; } .el-time-panel__btn.confirm { color: $theme-color !important; } /* 單選復(fù)選選中顏色 */ .el-checkbox__input.is-checked .el-checkbox__inner, .el-radio__input.is-checked .el-radio__inner { background-color: $theme-color !important; border-color: $theme-color !important; } .el-checkbox__input.is-checked + .el-checkbox__label, .el-radio__input.is-checked + .el-radio__label { color: $theme-color; } /* 單選復(fù)選禁用顏色 */ .el-checkbox__input.is-disabled .el-checkbox__inner, .el-radio__input.is-disabled .el-radio__inner { background-color: #f2f6fc !important; border-color: #dcdfe6 !important; } .el-checkbox__input.is-disabled + .el-checkbox__label, .el-radio__input.is-disabled + .el-radio__label { color: #c0c4cc !important; } .el-checkbox__input.is-indeterminate .el-checkbox__inner { background-color: $theme-color !important; border-color: $theme-color !important; } .el-checkbox__inner:hover, .el-radio__inner:hover { border-color: $theme-color !important; } /* 分頁(yè)樣式 */ .el-pagination { padding: 2px 5px; margin: 15px 0 0 0; font-weight: 400; color: #000; text-align: right; } .el-pagination.is-background .el-pager li:not(.disabled).active { background-color: $theme-color !important; border-color: $theme-color !important; } /* 表格單元格樣式 */ .el-table .color_yellow .cell { color: #ffd966; } .el-table .color_orange .cell { color: #f58801; } .el-table .color_red .cell { color: #d8090f; } .el-table .color_green .cell { color: #67c23a; } /* 分頁(yè)按鈕顏色 */ .el-pagination.is-background .el-pager li:not(.disabled):hover { color: $theme-color; } .el-pagination.is-background .el-pager li:not(.disabled).active { color: #fff; } /* 下拉選中顏色 */ .el-select-dropdown__item.selected { color: $theme-color; } /* 下拉框激活狀態(tài)邊框顏色 */ .el-select .el-input.is-focus .el-input__inner { border-color: $theme-color; } .el-select-dropdown.is-multiple .el-select-dropdown__item.selected { color: $theme-color; } /* 輸入框激活狀態(tài)邊框顏色 */ .el-input .el-input__inner:hover, .el-input .el-input__inner:focus, .el-textarea__inner:hover, .el-textarea__inner:focus { border-color: $theme-color !important; } /* 頁(yè)簽顏色 */ .tags-content .el-tabs__item:hover { color: $theme-color; } .tags-bar-container .tags-content .el-tabs__header .el-tabs__item.is-active { background-color: $theme-color !important; border-color: $theme-color !important; } /* 彈窗關(guān)閉按鈕 */ .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close { color: $theme-color; } .el-message-box__headerbtn:focus .el-message-box__close, .el-message-box__headerbtn:hover .el-message-box__close { color: $theme-color; } /* 頂部更多操作樣式 */ .el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus { color: $theme-color; } /* 左側(cè)菜單樣式 */ .side-bar-container .el-menu .el-menu-item.is-active, .side-bar-container .el-menu .el-menu-item:hover { background-color: $theme-color !important; } /* 正在加載樣式 */ .el-loading-spinner .path { stroke: $theme-color; } .el-loading-spinner .el-loading-text { color: $theme-color; } /* tab選項(xiàng)卡 */ .el-tabs__item { font-weight: normal; } .el-tabs__item.is-active { color: $theme-color; } .el-tabs__item:hover { color: $theme-color; } .el-tabs__active-bar { background-color: $theme-color; } /* 返回按鈕 */ .el-backtop { color: $theme-color; } // 默認(rèn)按鈕加粗 .el-button--default { font-weight: 700; } // 小按鈕樣式調(diào)整 .el-button--mini { padding: 7px 8px; } .tinymce-container { .mce-menubtn.mce-fixed-width span { width: 70px; } .mce-btn button { padding: 4px; } } // 鏈接跳轉(zhuǎn)樣式 .link-style { color: #606266; text-decoration: underline; margin-left: 0px; } // 表格固定列滾動(dòng)條 .el-table--scrollable-x { .el-table__body-wrapper { z-index: 20; } } .el-table__fixed, .el-table__fixed-right { .el-table__fixed-body-wrapper { z-index: 30; } } // element ui 調(diào)整樣式 .el-table td { padding: 5px 0; } .el-drawer:focus { outline: none; } .el-drawer__close-btn:focus { outline: none; } .el-timeline-item__timestamp { color: #3db373; } .el-timeline-item__tail { height: calc(100% - 19px); position: absolute; bottom: 0px; border-left: 1px solid #e0e6e0; } .el-timeline-item { padding: 0; margin-bottom: 5px; } .el-timeline-item__timestamp.is-top { margin-bottom: 3px; } .el-timeline-item__node { background-color: #e0e6e0; } .el-timeline-item__node--normal { top: 3px; left: 1px; width: 8px; height: 8px; } .right_drawer { /deep/ .el-popover { padding: 0; } } .el-popover { padding: 0; min-width: 100px; } .el-popconfirm{ padding: 12px !important; /deep/.el-button--mini{ padding: 5px; margin-top: 5px; } } .tree-box { .tree { * { background-color: transparent !important; } *:focus { background-color: transparent !important; } } } // 返回樣式 .back { // padding: 48px 100px 0px 200px; height: 50px; display: flex; align-items: center; justify-content: space-between; font-size: 15px; // border-bottom: 1px solid #1E8E76; // margin-bottom: 20px; div:nth-of-type(1) { display: flex; align-items: center; div { cursor: pointer; margin-right: 16px; i { font-size: 15px; } display: flex; align-items: center; justify-content: center; width: 64px; height: 30px; background: #ffffff; border-radius: 14px; border: 1px solid #f4f9f4; span { font-size: 12px; color: rgba(0, 0, 0, 0.5); } } h5 { color: #7f7f7f; font-size: 12px; color: $theme-color; } } div:nth-of-type(2) { padding: 0 10px; min-width: 100px; height: 28px; line-height: 28px; text-align: center; background: #ffffff; border: 1px solid #f4f9f4; border-radius: 4px; } div { font-size: 12px; color: #7f7f7f; } } // 設(shè)置字體大小 .el-table, .top-box, .el-input__inner, .el-textarea__inner, .el-form-item__label, .line { font-size: 12px; } // 表格頭部樣式 .el-table__header-wrapper .has-gutter th, .el-table__header-wrapper .has-gutter tr { background-color: #f4f4f4 !important; // padding: 8px 0px; } // tooltip彈窗樣式 .el-tooltip__popper { max-width: 600px; line-height: 180%; } .el-tooltip__popper { z-index: 9999999 !important; } .el-tooltip__popper { background-color: #fff !important; color: rgba(0, 0, 0, 0.85) !important; // border: 1px solid #e4e7ed !important; box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.06) !important; } // 控制三角形顏色 .el-tooltip__popper[x-placement^="top"] .popper__arrow { border-top-color: #fff; border-bottom-color: #fff; } .el-tooltip__popper[x-placement^="top"] .popper__arrow:after { border-top-color: #fff; border-bottom-color: #fff; } .el-tooltip__popper[x-placement^="bottom"] .popper__arrow { border-bottom-color: #fff; } .el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after { border-bottom-color: #fff; } .el-autocomplete-suggestion { z-index: 998 !important; width: auto !important; } .tag { cursor: pointer; //color: #3370ff; color: rgb(143, 149, 158); } .special_tag_one { padding: 0 6px 0 3px; //background-color: #3370ff; border-radius: 14px; .tag { cursor: pointer; color: #3370ff; //color: #fff; } } .special_tag_two { } .tooptip_prop_class { padding: 5px; font-size: 10px; } .block_up { font-size: 14px; margin-left: 5px; color: rgba(0, 0, 0, 0.5); } // 提示語(yǔ) .footer_tip, .footer_hint { z-index: -1; flex: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 90px; text-align: center; color: #c0c4cc; font-size: 14px; position: relative; i { position: relative; top: 1px; color: #f3a56d !important; } } @media screen and (max-width: 1500px) { .footer_tip { position: relative; margin-bottom: 0; } .footer_hint { position: relative; margin-bottom: 90px; } } .H_L{ background-color: skyblue; text-decoration: underline red; cursor: pointer; }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- Element-UI中el-table如何合并相同單元格
- element-ui中el-table不顯示數(shù)據(jù)的問(wèn)題解決
- Element-ui設(shè)置el-table表頭全選框隱藏或禁用
- vue element-ui實(shí)現(xiàn)el-table表格多選以及回顯方式
- vue element-ui el-table組件自定義合計(jì)(summary-method)的坑
- element-ui中如何給el-table的某一行或某一列加樣式
- element-ui如何取消el-table的hover狀態(tài)(取消高亮顯示)
- 圖文詳解Element-UI中自定義修改el-table樣式
- Element-UI 解決el-table中圖片懸浮被遮擋問(wèn)題小結(jié)
相關(guān)文章
詳解Unity webgl 嵌入Vue實(shí)現(xiàn)過(guò)程
Unity webgl嵌入到前端網(wǎng)頁(yè)中,前端通過(guò)調(diào)用Unity webgl內(nèi)方法實(shí)現(xiàn)需要展示的功能,前端點(diǎn)擊Unity webgl內(nèi)的交互點(diǎn),Unity webgl返回給前端一些需要的數(shù)據(jù),這篇文章主要介紹了Unity webgl 嵌入Vue實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下2024-01-01vue el-table實(shí)現(xiàn)多選框回填的示例代碼
摘要:Vue多選框回填是實(shí)現(xiàn)表單數(shù)據(jù)高效處理的常見(jiàn)需求,本文主要介紹了vue el-table實(shí)現(xiàn)多選框回填的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01vue中動(dòng)態(tài)參數(shù)與計(jì)算屬性的使用方法
在平時(shí)vue開(kāi)發(fā)中,我們經(jīng)常會(huì)用到計(jì)算屬性(計(jì)算屬性只有在它的相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新求值)來(lái)計(jì)算我們需要的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue中動(dòng)態(tài)參數(shù)與計(jì)算屬性使用的相關(guān)資料,需要的朋友可以參考下2021-08-08使用element-ui table expand展開(kāi)行實(shí)現(xiàn)手風(fēng)琴效果
這篇文章主要介紹了使用element-ui table expand展開(kāi)行實(shí)現(xiàn)手風(fēng)琴效果,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03vue.js實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)選項(xiàng)卡切換功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue-cli+webpack在生成的項(xiàng)目中使用bootstrap實(shí)例代碼
本篇文章主要介紹了vue-cli+webpack在生成的項(xiàng)目中使用bootstrap實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-05-05Vue-cli proxyTable 解決開(kāi)發(fā)環(huán)境的跨域問(wèn)題詳解
本篇文章主要介紹了Vue-cli proxyTable 解決開(kāi)發(fā)環(huán)境的跨域問(wèn)題詳解,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-05-05