Vxe-Table開發(fā)中的各種坑以及避坑指南
背景：
由于公司要開發(fā)erp，采用了element-plus做為UI基礎框架，但是回想往事點點滴滴，element-ui表格的種種表現(xiàn)令人痛心，于是跟leader商量之后決定使用Vxe-Table做表格插件，雖然element-plus在表格上也在大力優(yōu)化，但就目前來看可用度確實不高，剛出了一個虛擬滾動，但看上去確實讓人有點心急。。。
開發(fā)階段遇到的各種問題
全局size的問題
有點扯犢子的事，我element-plus要做全局的size修改，那就意味著我的表格也要做全局的size修改，慶幸的是它有自帶的全局size配置，配置方法也很簡單，在setup方法中設置即可，配合vuex、本地存儲（包括cookie），還有模有樣的可以搞一搞，不幸的是，這特么size跟element-plus的size規(guī)則天差地別，雖然可以通過修改變量去規(guī)避這個問題，但是成本屬實有點高。而且element-plus的為large、default、small，但是Vxe-Table的為下面是medium、small、mini還需要做判斷，雜七雜八，有點小惡心。下面附上代碼。
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
//引入font-awesome
import 'font-awesome/css/font-awesome.css'
import { localAppSizeKey } from '@/store/modules/settings/index'
VXETable.setup({
size: formatSize(localStorage.getItem(localAppSizeKey) || 'default') as any
})
export default function (app: any) {
app.use(VXETable)
// 給 vue 實例掛載內(nèi)部對象，例如：
// app.config.globalProperties.$XModal = VXETable.modal
// app.config.globalProperties.$XPrint = VXETable.print
// app.config.globalProperties.$XSaveFile = VXETable.saveFile
// app.config.globalProperties.$XReadFile = VXETable.readFile
}
/**
* 解析element-plus的全局size
* @param size
* @returns
*/
function formatSize(size: null | undefined | string) {
let resSize = 'small'
switch (size) {
case 'large':
resSize = 'medium'
break
case 'default':
resSize = 'small'
break
case 'small':
resSize = 'mini'
break
}
return resSize
}size是存在localStorage里面的，設置一次，更新一次值，我這里就很簡單粗暴了，全局設置element-plus的size然后通過format方法解析，存入本地存儲，然后刷新頁面，啊哈哈哈哈，問就是還不知道咋搞，有人知道的麻煩私一個，解決這個問題。
按鈕的問題
說真的，我很能理解作者的設計模式，我也很佩服作者的代碼功底，畢竟我只是一個使用者，但是但是，你自己開發(fā)一套按鈕什么的，能不能走點心嘛，按鈕中的文字居然不能垂直居中。大哥這都啥年代了哎，附上我處理按鈕垂直居中的代碼
.vxe-button.type--button {
display: inline-flex;
align-items: center;
justify-content: center;
}簡單粗暴，flex解決，有問題再解決
合并單元格的問題
單元格合并的按照官網(wǎng)提供的案例，第一次使用了spanMethod方法，那時候數(shù)據(jù)量少，沒有開啟虛擬滾動，后來數(shù)據(jù)量大了，測試滾動了一下叫了一聲，我頭皮一麻就知道出問題了，結果我看到官網(wǎng)上赫然寫著，不支持虛擬滾動，哎~~ 我用這個表格不就是沖著虛擬滾動來的嗎？再找解決方案把，后來決定還是用【mergeCells】去解決這個問題，解決思路就是，根據(jù)需求，合并固定的列，然后在數(shù)據(jù)中查詢最近的相同數(shù)據(jù)（后端已排好序），生成要合并的數(shù)據(jù)，然后賦值到gridOptions對象上面，具體實現(xiàn)如下：
proxyConfig: {
seq: true,
sort: true,
filter: true,
form: true,
props: {
result: 'data.data',
total: 'data.totalCount'
},
ajax: {
query: async ({ page, form }) => {
const { pageSize: size, currentPage } = page
const paging = { size, page: currentPage }
const queryParams: any = Object.assign({ isOdm: 1 }, paging, form)
const response = await queryList(queryParams)
// 合并單元格選項
let mergeCells: any[] = []
mergeCells = generateMergeCells(
response.data.data,
'spuName',
[2, 3, 4, 5, 6, 7, 8]
)
gridOptions.mergeCells = mergeCells
return response
}
}
},這時候第一頁可以分頁了，但是跳轉頁面后，發(fā)現(xiàn)問題了，第二頁分頁居然錯亂？后面的全亂了??！為此谷歌百度都查了，結果還是沒有解決方案。后來突發(fā)奇想，每次分頁我reload一下會不會好點，結果還真就行了，其實就是在前面代碼中加入一行代碼：xGrid.value.reloadData(response.data.data)
proxyConfig: {
seq: true,
sort: true,
filter: true,
form: true,
props: {
result: 'data.data',
total: 'data.totalCount'
},
ajax: {
query: async ({ page, form }) => {
const { pageSize: size, currentPage } = page
const paging = { size, page: currentPage }
const queryParams: any = Object.assign({ isOdm: 1 }, paging, form)
const response = await queryList(queryParams)
// 合并單元格選項
let mergeCells: any[] = []
mergeCells = generateMergeCells(
response.data.data,
'spuName',
[2, 3, 4, 5, 6, 7, 8]
)
gridOptions.mergeCells = mergeCells
xGrid.value.reloadData(response.data.data)
return response
}
}
},蕪湖~~，解決！附上動態(tài)生成mergeCells的代碼
// 生成合并單元格數(shù)據(jù)
export const generateMergeCells = (
data: any[],
key: string,
cols: number[]
) => {
if (data.length === 0) return []
let pointer: number = 0
let total: number = 0
let curKeyValue: any = data[0][key]
const result = data.reduce((acc: any[], cur: any, index: number) => {
const val = cur[key]
let mergeData: any = []
if (val !== curKeyValue) {
// 生成合并數(shù)據(jù)
if (total > 1) {
mergeData = generateCells(cols, pointer, total)
}
curKeyValue = val
pointer = index // 指針index賦值
total = 1
} else {
total += 1
if (index === data.length - 1) {
mergeData = generateCells(cols, pointer, total)
}
}
acc.push(...mergeData)
return acc
}, [])
return result
}
export const generateCells = (
cols: number[],
rowIndex: number,
rowspan: number
) => {
return cols.map((col: number) => {
return {
row: rowIndex,
col,
rowspan,
colspan: 1
}
})
}reload和load的問題
我實在搞不懂為什么每次reload和load要傳參數(shù)進去，而卻重置和查詢這種按鈕的方法沒有拋出來以供調用。
但是也可以解決，作者拋出了很多方法，但是說明文檔里面沒有...，具體可以參照node_modules/vxe-table/packages/src/grid.ts文件
gridMethods.commitProxy('query')
// insert
// insert_actived
// mark_cancel
// remove
// import
// open_import
// export
// open_export
// reset_custom
// _init
// 重置page 并查詢
gridMethods.commitProxy('_init')
// reload
// 重新載入，可以重置一些參數(shù)但并不能重置查詢參數(shù)
gridMethods.commitProxy('reload')
// query
// delete
// savegrid在重置之后列表自動查詢的時候還是會把原本的數(shù)據(jù)帶過去的問題解決
在被坑的死去活來的時候，發(fā)現(xiàn)，grid的查詢字段，如果ui不是自帶的，這時候就會又有一個問題，那就是點擊重置的時候，slots自定義的組件不能重置，后來發(fā)現(xiàn)有@form-reset的方法去重置，但是需要自己去寫，這一點不是很友好，但是還可以接受
<vxe-grid ref="xGrid"
class="sl-main-wrapper"
v-bind="gridOptions"
@form-reset="gridformReset">
...
</vxe-grid>const gridformReset = ({ data }) => {
const keys = ['picker', 'stereotypeMaker', 'status']
keys.forEach((i: any) => {
data[i] = undefined
})
}但是發(fā)現(xiàn)了一個問題，我第一次重置的時候，我重置后的值居然帶不過去，它還是上一個條件的參數(shù)~~，我滴個親哥，要命啊，找了很多解決方案，首先是代碼次序，不行，再次是重新組織查詢的參數(shù)，發(fā)現(xiàn)還是不行，后來在吃飯的時候想起來會不會是因為沒有nextTick的原因呢？
果然是?。。。。。。。。。。。。。。。。。。。。。。。?！
最后的解決方案是這樣的：
以下代碼只是我的場景，核心點是return nextTick(() => { return response })
query: ({ page, form }) => {
return nextTick(async () => {
const { pageSize: size, currentPage } = page
const paging = { size, page: currentPage }
const queryParams: any = Object.assign(paging, form)
const vxeForm = clone(queryParams, true)
const picker = vxeForm.picker || []
if (picker.length > 0) {
if (form.dateType === 1) {
vxeForm.tailorCompleteTimeStart = picker[0]
vxeForm.tailorCompleteTimeEnd = picker[1]
} else if (form.dateType === 2) {
vxeForm.stereotypeCompleteTimeStart = picker[0]
vxeForm.stereotypeCompleteTimeEnd = picker[1]
}
}
delete vxeForm.picker
delete vxeForm.dateType
const response = await queryList(vxeForm)
return response
})
}總結
到此這篇關于Vxe-Table開發(fā)中各種坑以及避坑指南的文章就介紹到這了,更多相關Vxe-Table避坑指南內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
- 如何使用?vxe-table?將行數(shù)據(jù)標記為刪除狀態(tài)
- vxe-table中vxe-grid(高級表格)的使用方法舉例
- vue中vxe-table虛擬滾動列表的使用詳解
- vxe-table中vxe-grid的使用解讀
- vue最強table vxe-table 虛擬滾動列表 前端導出問題分析
- Vue表格組件Vxe-table使用技巧總結
- 使用vxe-table合并單元格后增加選中效果
- 關于vxe-table復選框翻頁選中問題及解決
- vue 中使用 vxe-table 制作可編輯表格的使用過程
- vxe-table vue table 表格組件功能
- vxe-table 實現(xiàn)行高拖拽功能示例詳解
相關文章
這篇文章主要介紹了從vue源碼看Vue.set()和this.$set()的相關知識,我們先來從Vue提供的Vue.set()和this.$set()這兩個api看看它內(nèi)部是怎么實現(xiàn)的。感興趣的朋友跟隨小編一起看看吧2018-08-08
這篇文章主要給大家介紹了關于Vue生命周期的那些事,在使用vue開發(fā)過程中經(jīng)常會接觸到生命周期的問題,但對于每個鉤子函數(shù)都做了什么,應用場景比較模糊,希望通過這次梳理讓自己清楚一些,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue+element控件之間間距太大問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章手把手教你拿捏vue?cale()計算函數(shù)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家詳細介紹了vue+element實現(xiàn)輸入密碼鎖屏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
JSX是一種Javascript的語法擴展,JSX = Javascript + XML,即在 Javascript里面寫XML,因為 JSX 的這個特性,所以他即具備了 Javascript的靈活性,同時又兼具html的語義化和直觀性,這篇文章主要給大家介紹了關于Vue中JSX的基本用法及高級部分的相關資料,需要的朋友可以參考下2022-11-11
Vue項目中v-bind動態(tài)綁定src路徑不成功問題及解決
這篇文章主要介紹了Vue項目中v-bind動態(tài)綁定src路徑不成功問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue通過elementUI組件實現(xiàn)圖片預覽效果
我們在開發(fā)中經(jīng)常會遇到通過點擊某個按鈕或者文字實現(xiàn)圖片的預覽功能,這里我們分別介紹vue2和vue3里面如何實現(xiàn)圖片預覽方法,需要的朋友可以參考下2023-09-09
vue-devtools是專門調試vue項目的調試工具,安裝成功之后,右邊會出現(xiàn)一個vue,就可以在線可以調試vue了,下面這篇文章主要給大家介紹了關于Vue調試工具vue-devtools的安裝與使用的相關資料,需要的朋友可以參考下2022-07-07
vue通過指令(directives)實現(xiàn)點擊空白處收起下拉框
這篇文章主要介紹了vue通過指令(directives)實現(xiàn)點擊空白處收起下拉框，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12