element ui 元件使用中遇到的問題

2021-09-12 05:36:07 字數 1331 閱讀 1347

官方文件中,el-progress 屬性 percentage 可選值範圍 0-100,超出會報錯。

但是,對於某些應用場景,可能並不適用。如目標設定,可能完成度超出目標設定,大於100%,但 element-ui 似乎並不認為這是乙個 bug

解決思路:

二次封裝 el-progress。超出 100% 時,percentage ,傳入100%。樣式根據ui設定使用css處理。innertext 不展示, 自定義文字展示,如"120%"。

通過給 table 傳入 span-method 方法可以實現合併行或列。該函式可以返回乙個包含兩個元素的陣列,第乙個元素代表rowspan,第二個元素代表colspan。 也可以返回乙個鍵名為rowspan和colspan的物件:

spanmethod()

;}

經嘗試,合併單元格,對於不同業務場景,spanmethod 處理方式如下:

簡單情況

簡單情況,可以通過四則運算處理:

如合併相同學科(三行一學科)

if

(rowindex %

3===0)

else

複雜情況

spanarr: 處理合併單元格,儲存第一列每行合併數目,如 [6,0,0,0,0,0,3,0,0,3,0,0,1],非0數字表示合併行數,0表示不顯示

// 獲取合併規則陣列 spanarr

// data 後台資料

getspanarr

(data)

else

else}}

return spanarr;},

// 合併單元格

spanmethod()

else

if(columnindex ===1)

}else

if(columnindex ===0)

;}}

合併表頭問題

element-ui 可以通過巢狀 el-table-column 設定多級表頭。但對於表頭合併,並不支援。

spanmethod屬性可以合併表內容,但不能合併表頭。

解決辦法:

目前採用設定 render-header 屬性,結合 css 處理,可以實現,目前沒有找到更好的辦法。

// 列標題 label 區域渲染使用的 function

renderheader(h, ) else if (column.label === '學部') ;

return column.label;

}

在使用element ui中的多級選單中遇到的問題

在使用element ui中的多級選單中遇到如下問題 專案不會報錯,只是顯示warning,大概的意思是傳遞prop的型別檢測要求是boolean型別,但是傳入的是字串型別。但是這樣子看著很彆扭,所以就開始找原因 在專案中是這樣寫的 element ui中的要求 這裡看的確是寫成了boolean型別...

React Draggable元件使用時遇到的問題

最近使用react draggable來滿足專案上要進行 拖拽的要求,在使用過程中發現再第一次使用拖拽的時候位置是不對的,會跳到頁面的左上角也就是位置 0,0 很突然,後來大佬幫忙解決的問題出現在這個 我同時還是用了dom align來初始化第一次的位置,這個dom align使用了乙個引數,use...

VUE全域性使用element ui元件

npm i element ui s import elementui from element ui import element ui lib theme default index.css vue.use elementui 搜尋 過程中遇到乙個bug import element ui li...