element-ui實現(xiàn)表格邊框的動態(tài)切換并防抖
需求
需求是這樣的：
- 先前的需求，要求表格按UI設(shè)計圖來，表格無邊框。
- 新來的需求，要求能支持表格列寬的能夠支持拖動。
按照官網(wǎng)，table組件的border屬性，設(shè)置為true時可以顯示邊框。有了邊框才能拖。
但是顯示了邊框，與之前的需求相悖。同時，既然顯示邊框有屬性border支持，那么動態(tài)的更新border的值，應(yīng)該就可以實現(xiàn)顯示表格邊框的動態(tài)切換。
基于此思路，采用比較折中的辦法：
- 默認(rèn)狀態(tài)下不顯示邊框
- 當(dāng)鼠標(biāo)移動到表格頭部時，顯示邊框，這個時候允許拖動。
鼠標(biāo)移動時，通過監(jiān)控鼠標(biāo)事件，動態(tài)的更新border屬性的值，進(jìn)而動態(tài)切換邊框的顯示。
實現(xiàn)過程
Vue組件中data屬性中增加一個showBorder, 默認(rèn)值false, 并將其綁定到table組件border屬性上
<el-table
:data="tableData"
:border="showBorder"
@selection-change="handleSelectionChange"
>
...
export default {
data () {
return {
showBorder: false
}
}
}
...
添加鼠標(biāo)事件、更新showBorder的值
...
methods: {
// 要在表格渲染出來后再加
addListener () {
const tabHeader = this.$el.querySelector('.el-table__header-wrapper')
if (tabHeader) {
tabHeader.onmouseenter = this.updataTableBorder.bind(this, true)
tabHeader.onmouseleave= this.updataTableBorder.bind(this, false)
}
},
updataTableBorder (value) {
this.showBorder = value
}
}
...
到這里，功能已經(jīng)實現(xiàn)了，當(dāng)鼠標(biāo)移動到表頭時，邊框顯示，然后就可以拖動列。鼠標(biāo)從表頭移開，切換的無邊框狀態(tài)。
- But
如果只是這么操作，會發(fā)現(xiàn)切換時，表格會抖動。體驗感非常的不好。
解決抖動
抖動原因
之所以會抖動，是因為不顯示邊框時，boder的width值為0，在切換到顯示邊框時，邊框有了實際的寬度，會占位置，導(dǎo)致表格相對無邊框時出現(xiàn)位置偏移。
如何讓邊框切換時，不抖動呢?
方案：
先給表格加上邊框，
- 當(dāng)不顯示邊框時，將邊框的顏色設(shè)置為透明，保留其原有的像素占位。
- 當(dāng)顯示邊框時，只需要將顏色值更新回來，就可以了。
解決抖動的實現(xiàn)過程
對比切換前后的表格樣式，發(fā)現(xiàn)邊框樣式，涉及到以下三個地方。
表格最外圍的div，控制表格最外圍的邊框，對應(yīng)的邊框border-top, border-left表頭單元格，控制表頭單元格的邊框, 控制表頭單元格的boder-bottom,border-right行單元格， 控制單元格的邊框, 控制行單元格的boder-bottom,border-right
另外，element-ui的table組件，有三個屬性，剛好可以控制表格、表頭單元格和所有單元格的樣式。分別是
- style
- header-cell-style
- cell-style
cell-style屬性時配置所有單元格的樣式（包括表頭），header-cell-style只控制表頭的單元格樣式。如果你沒有另外配置header-cell-style，完全可以用cell-style來控制所有單元格的邊框。
那么，給style、header-cell-style、cell-style屬性，分別綁定tableStyle、headerCellStyle、cellStyle等三個變量，動態(tài)的更新這三個值，依照Vue的響應(yīng)式原理，對應(yīng)的style、header-cell-style、cell-style屬性值將會隨之改變。
<el-table
:data="tableData"
:border="showBorder"
:style="tableStyle"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
@selection-change="handleSelectionChange"
>
const noBordertyle = '1px solid transparent'
const borderStyle = '1px solid #EBEEF5'
export default {
data () {
return {
showBorder: false,
// 表格樣式
tableStyle: {
borderTop: noBordertyle,
borderLeft: noBordertyle
},
// 表頭樣式
headerCellStyle: {
background: 'rgba(42,113,255,0.03)',
color: '#000000',
borderBottom: noBordertyle,
borderRight: noBordertyle
},
// 單元格樣式
cellStyle: {
borderBottom: noBordertyle,
borderRight: noBordertyle
}
}
},
methods: {
// 要在表格渲染出來后再加
addListener () {
const tabHeader = this.$el.querySelector('.el-table__header-wrapper')
if (tabHeader) {
tabHeader.onmouseenter = this.updataTableBorder.bind(this, true)
tabHeader.onmouseleave= this.updataTableBorder.bind(this, false)
}
},
updataTableBorder (open) {
this.showBorder = open
const border = open ? borderStyle : noBordertyle
this.tableStyle.borderTop = border
this.tableStyle.borderLeft = border
this.headerCellStyle.borderBottom = border
this.headerCellStyle.borderRight = border
this.cellStyle.borderBottom = border
this.cellStyle.borderRight = border
}
}
}
這樣就解決掉邊框切換時的抖動問題啦。
再優(yōu)化
問題雖然得到了解決，但是，通常在項目中，會有很多地方用到表格，表格的風(fēng)格一般都是一致的。
如果按上述過程直接用，那么在每個使用表格的組件中，都要加入處理這些代碼。處理維護(hù)起來，那是相當(dāng)?shù)姆爆崱?/p>
如果能把這些處理過程，放到一個地方單獨維護(hù)，那就舒服多了。
想到Vue的 mixin 混入了吧。
- 新建一個混入文件，tableMixin.js，還是上面的代碼。
- 在使用表格的組件中，導(dǎo)入tableMixin并在混入選項中加入。
import mixin from ''./mixins/tableMixin
export default {
...
mixins: [mixin]
}
完！??！
后記
按之前的處理完成后，表格確實不抖動了。但仔細(xì)觀察后發(fā)現(xiàn)，位于表格最后一列的操作列，左邊的邊框沒顯示。而是只是差了1個像素沒顯示。
反復(fù)檢查單元格的邊框樣式，都是正常的。也就是正常情況下應(yīng)該會顯示，而實際就是沒有。百思不得其解。
轉(zhuǎn)天再看這個問題，發(fā)現(xiàn)最后的操作列使用了fixed屬性，為固定列。也就是當(dāng)使用橫向滾動條拖動時，最后的操作列位置是不變的。
固定列
仔細(xì)檢查固定列，查看DOM結(jié)構(gòu)，發(fā)現(xiàn)多了一個 el-table__fixed-right 的div，樣式使用了絕對定位，并且在內(nèi)聯(lián)樣式中設(shè)置了寬度width。而且這家節(jié)點剛好對應(yīng)右側(cè)的操作列。
那么是不是這個div，覆蓋在本該顯示的邊框元素之上，由于我用非常規(guī)手段，修改了邊框，導(dǎo)致這個絕對定位的元素，width值已不準(zhǔn)確，進(jìn)而邊框被覆蓋。
手動調(diào)整固定列的列寬，去掉1個像素。果然邊框出現(xiàn)了。
既然找到癥結(jié)，解決問題也就簡單了。在addListener方法中，把這個div的寬度減1就OK了。
addListener () {
const tabHeader = this.$el.querySelector('.el-table__header-wrapper')
if (tabHeader) {
tabHeader.onmouseenter = this.updataTableBorder.bind(this, true)
tabHeader.onmouseleave= this.updataTableBorder.bind(this, false)
}
const fixedRightNode = this.$el.querySelector('.el-table__fixed-right')
if (fixedRightNode) {
const width = fixedRightNode.style.width
fixedRightNode.style.width = width ? (parseInt(width) - 1) + 'px' : width
}
},
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue和iview實現(xiàn)Scroll 數(shù)據(jù)無限滾動功能
今天小編就為大家分享一篇vue和iview實現(xiàn)Scroll 數(shù)據(jù)無限滾動功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
自從入了 Vue 之后，一直在用 axios 這個庫來做一些異步請求。下面這篇文章主要給大家介紹了關(guān)于axios中cookie跨域及相關(guān)配置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起看看吧。2017-12-12
淺談Vue使用Elementui修改默認(rèn)的最快方法
這篇文章主要介紹了淺談Vue使用Elementui修改默認(rèn)的最快方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
electron-vue利用webpack打包實現(xiàn)多頁面的入口文件問題
項目需要在electron的項目中新打開一個窗口，利用webpack作為靜態(tài)資源打包器，發(fā)現(xiàn)在webpack中可以設(shè)置多頁面的入口，今天來講一下我在electron中利用webpack建立多頁面入口的踩坑經(jīng)驗,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了Vue.js事件處理器與表單控件綁定詳解的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
我們在做項目經(jīng)常會遇到組件功能不能滿足業(yè)務(wù)需求的時候,這時候需要在原有的組件上進(jìn)行二次封裝,下面這篇文章主要給大家介紹了關(guān)于Vue組件二次封裝的一些實用技巧,需要的朋友可以參考下2022-04-04
v-if和v-show的區(qū)別是前端面試中常問的基礎(chǔ)知識點,v-if、v-show顧名思義就是用來判斷視圖層展示效果的,下面這篇文章主要給大家介紹了關(guān)于Vue常用指令v-if與v-show區(qū)別的相關(guān)資料,需要的朋友可以參考下2021-10-10
本篇文章主要介紹了淺談Vue-cli 命令行工具分析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue調(diào)試工具vue-devtools的安裝全過程
這篇文章主要介紹了vue調(diào)試工具vue-devtools的安裝全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
this.$nextTick是在下次dom更新循環(huán)之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后立即使用這個方法,獲取更新后的dom,下面這篇文章主要給大家介紹了關(guān)于Vue中this.$nextTick()的理解與使用的相關(guān)資料,需要的朋友可以參考下2022-02-02