需求

需求是這樣的：

• 先前的需求，要求表格按UI設(shè)計(jì)圖來，表格無邊框。
• 新來的需求，要求能支持表格列寬的能夠支持拖動(dòng)。

按照官網(wǎng)，table組件的border屬性，設(shè)置為true時(shí)可以顯示邊框。有了邊框才能拖。

但是顯示了邊框，與之前的需求相悖。同時(shí)，既然顯示邊框有屬性border支持，那么動(dòng)態(tài)的更新border的值，應(yīng)該就可以實(shí)現(xiàn)顯示表格邊框的動(dòng)態(tài)切換。

基于此思路，采用比較折中的辦法：

• 默認(rèn)狀態(tài)下不顯示邊框
• 當(dāng)鼠標(biāo)移動(dòng)到表格頭部時(shí)，顯示邊框，這個(gè)時(shí)候允許拖動(dòng)。

鼠標(biāo)移動(dòng)時(shí)，通過監(jiān)控鼠標(biāo)事件，動(dòng)態(tài)的更新border屬性的值，進(jìn)而動(dòng)態(tài)切換邊框的顯示。

實(shí)現(xiàn)過程

Vue組件中data屬性中增加一個(gè)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)實(shí)現(xiàn)了，當(dāng)鼠標(biāo)移動(dòng)到表頭時(shí)，邊框顯示，然后就可以拖動(dòng)列。鼠標(biāo)從表頭移開，切換的無邊框狀態(tài)。

• But

如果只是這么操作，會發(fā)現(xiàn)切換時(shí)，表格會抖動(dòng)。體驗(yàn)感非常的不好。

解決抖動(dòng)

抖動(dòng)原因

之所以會抖動(dòng)，是因?yàn)椴伙@示邊框時(shí)，boder的width值為0，在切換到顯示邊框時(shí)，邊框有了實(shí)際的寬度，會占位置，導(dǎo)致表格相對無邊框時(shí)出現(xiàn)位置偏移。

如何讓邊框切換時(shí)，不抖動(dòng)呢?

方案：

先給表格加上邊框，

• 當(dāng)不顯示邊框時(shí)，將邊框的顏色設(shè)置為透明，保留其原有的像素占位。
• 當(dāng)顯示邊框時(shí)，只需要將顏色值更新回來，就可以了。

解決抖動(dòng)的實(shí)現(xiàn)過程

對比切換前后的表格樣式，發(fā)現(xiàn)邊框樣式，涉及到以下三個(gè)地方。

表格最外圍的div，控制表格最外圍的邊框，對應(yīng)的邊框border-top, border-left表頭單元格，控制表頭單元格的邊框, 控制表頭單元格的boder-bottom,border-right行單元格， 控制單元格的邊框, 控制行單元格的boder-bottom,border-right

另外，element-ui的table組件，有三個(gè)屬性，剛好可以控制表格、表頭單元格和所有單元格的樣式。分別是

• style
• header-cell-style
• cell-style

cell-style屬性時(shí)配置所有單元格的樣式（包括表頭），header-cell-style只控制表頭的單元格樣式。如果你沒有另外配置header-cell-style，完全可以用cell-style來控制所有單元格的邊框。

那么，給style、header-cell-style、cell-style屬性，分別綁定tableStyle、headerCellStyle、cellStyle等三個(gè)變量，動(dòng)態(tài)的更新這三個(gè)值，依照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
    }
  }
}

這樣就解決掉邊框切換時(shí)的抖動(dòng)問題啦。

再優(yōu)化

問題雖然得到了解決，但是，通常在項(xiàng)目中，會有很多地方用到表格，表格的風(fēng)格一般都是一致的。

如果按上述過程直接用，那么在每個(gè)使用表格的組件中，都要加入處理這些代碼。處理維護(hù)起來，那是相當(dāng)?shù)姆爆崱?/p>

如果能把這些處理過程，放到一個(gè)地方單獨(dú)維護(hù)，那就舒服多了。

想到Vue的 mixin 混入了吧。

• 新建一個(gè)混入文件，tableMixin.js，還是上面的代碼。
• 在使用表格的組件中，導(dǎo)入tableMixin并在混入選項(xiàng)中加入。

import mixin from ''./mixins/tableMixin
export default {
  ...
  mixins: [mixin]
}

完！??！

后記

按之前的處理完成后，表格確實(shí)不抖動(dòng)了。但仔細(xì)觀察后發(fā)現(xiàn)，位于表格最后一列的操作列，左邊的邊框沒顯示。而是只是差了1個(gè)像素沒顯示。

反復(fù)檢查單元格的邊框樣式，都是正常的。也就是正常情況下應(yīng)該會顯示，而實(shí)際就是沒有。百思不得其解。

轉(zhuǎn)天再看這個(gè)問題，發(fā)現(xiàn)最后的操作列使用了fixed屬性，為固定列。也就是當(dāng)使用橫向滾動(dòng)條拖動(dòng)時(shí)，最后的操作列位置是不變的。

固定列

仔細(xì)檢查固定列，查看DOM結(jié)構(gòu)，發(fā)現(xiàn)多了一個(gè) el-table__fixed-right 的div，樣式使用了絕對定位，并且在內(nèi)聯(lián)樣式中設(shè)置了寬度width。而且這家節(jié)點(diǎn)剛好對應(yīng)右側(cè)的操作列。

那么是不是這個(gè)div，覆蓋在本該顯示的邊框元素之上，由于我用非常規(guī)手段，修改了邊框，導(dǎo)致這個(gè)絕對定位的元素，width值已不準(zhǔn)確，進(jìn)而邊框被覆蓋。

手動(dòng)調(diào)整固定列的列寬，去掉1個(gè)像素。果然邊框出現(xiàn)了。

既然找到癥結(jié)，解決問題也就簡單了。在addListener方法中，把這個(gè)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
      }
    },

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論