ElementUI的Table組件中的renderHeader方法研究

IntMain 發布于2019-08-23 11:55 / 2793人閱讀

摘要：難道是因為這個組件自帶標簽胡亂猜疑是解決不了問題的。為何稱之為勉強版，因為從上面的也看出來了。再看數組第二個值，這便是一個完整的示例了。也希望能更加努力的學習和進步，更深的理解前端這門藝術

項目使用ElementUI，挺好用的，頁面中有些地方的幫助提示通過使用組件Tooltip和el-icon-question來展示，代碼如下：

本月累計收益

截圖如下：

另外也可以看看jsfiddle的demo

全站很多地方都有都需要這樣的幫助提示，其中有些需要在表格的表頭上添加，似乎有點難度。效果如下：

因為ElementUI上面的文檔對這塊自定義表頭沒有什么參考的文檔，是否能夠實現心里沒底，去仔細翻了文檔，發現有個renderHeader的函數可以實現，一直以為Vue還算比較熟悉的我有點點懵，這是個啥？？？

renderHeader（函數渲染）

在我不太多的Vue項目開發實踐中，很少用到，因此并不熟悉，先看看官方解釋：

Vue 推薦在絕大多數情況下使用 template 來創建你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全編程的能力，這就是 render 函數，它比 template 更接近編譯器。

ElementUI中的renderHeader就是對列標題Label區域渲染使用的Function，通過他實現自定義表頭label功能！

萬變不離其宗，這個ElementUI的解釋一看就像是這段官方示例：

// 官方示例部分
render: function (createElement) {
  return createElement("h1", this.blogTitle)
}

而回頭再看看ElementUI的示例：Function(h, { column, $index })。耐心琢磨，結合createElement看看便粗略寫出來了一個勉強能用的：

renderHeader(h, { column, $index }) {
  return h(
    "el-tooltip",
    {
      props: {
        content: (function() {
          let label = column.label
          switch (label) {
            case "訪問數":
              return "網站頁面上獨立訪問應用的人數（UV）"
              break
            case "提交數":
              return "網站頁面上訪客在應用上完成提交的數量"
              break
            case "成交數":
              return "網站頁面上最終成功在應用上完成提交的數量"
              break
          }
        })(),
        placement: "top"
      },
      domProps: {
        innerHTML: column.label + ""
      }
    },
    [h("span")]
  )
},
// ...

但是很奇怪的是，最后面我要加上這個[h("span")]才行（demo）。

這種寫法我還是參考element table 自定義表頭，但是假設我寫成[h("span", "test")]是無法展現出test的效果的（demo）。根據vue文檔中解釋的第三個參數，這里最為一個數組，為何span成了el-tooltip的HTML標簽，我還是不解。

之所以奇怪是因為假設我將引入的組件換成el-button，見如下代碼：

renderHeader(h, { column, $index }) {
  return h(
    "el-button",
    {
      props: {
        content: (function() {
          let label = column.label
        })()
      },
      domProps: {
        innerHTML: column.label + ""
      }
    }
  )
},
// ...

則不需要尾部那個[h("span")]。卻能呈現出button結合icon的正確效果（demo）。難道是因為這個組件自帶HTML標簽？胡亂猜疑是解決不了問題的。幾番嘗試，還是沒能達到預期交互效果。不過進度問題，暫時只能使用這個勉強版本。

為何稱之為勉強版，因為從上面的demo也看出來了。這個提示交互和我文章之前寫的交互是有區別的，正確交互是：光標移入問號的圖標上才會展示提示框，雖然目前勉強版影響不大，卻一直在心中如一個疙瘩。于是過了一周，決定抽空把這個問題處理好，就有了新的寫法。

勉強版雖然沒有大礙，但是心中略有不爽。幾日后專門抽點時間多次閱讀各種實例，仔細閱讀文檔，反復嘗試各種寫法。終于寫出了一個相對良好的版本，直接先上代碼：

renderHeader(h, { column, $index }) {
  return [
    column.label,
    h(
      "el-tooltip",
      {
        props: {
          content: (function() {
            let label = column.label
            switch (label) {
              case "訪問數":
                return "網站頁面上獨立訪問應用的人數（UV）"
                break
              case "提交數":
                return "網站頁面上訪客在應用上完成提交的數量"
                break
              case "成交數":
                return "網站頁面上最終成功在應用上完成提交的數量"
                break
            }
          })(),
          placement: "top"
        }
      },
      [
        h("span", {
          class: {
            "el-icon-question": true
          }
        })
      ]
    )
  ]
}

這個寫法很特別，return的是一個數組，這個寫法我又是哪里看到的呢？來自elementUI的table組件的表頭自定義：想把單位換行，有什么解決方法嗎？的采納回復中。乍一看有點亂七八糟，不過仔細想想，之前的提示在整個表頭都觸發了，現在這個數組大概起到了拼接作用，也就是將不需要出發的textNode部分提了出來。再看數組第二個值，這便是一個完整的示例了。最終效果可見demo。

其實心中還是有個疑問，為什么這里h(param1, param2, param3)的第三個參數用數組，數組中的第一個又是一個h()，并且這個對應的就是組件el-tooltip的HTML標簽，沒有它就無法正常渲染該組件。

寫到這里，其實問題已經解決了，雖然符合需求的完美版本已經上線，但是感覺個人對Vue或者說是Javascript更深層面的理解能力還不夠，也就對各種現象沒辦法做出很好的解釋。也希望能更加努力的學習和進步，更深的理解前端這門藝術：）

云服務器 GPU云服務器 js清空table中的數據 js獲取table中的數據類中的魔術方法 php中的魔術方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97679.html

步步向前之Element-UI

摘要：無效方案根據交易所小時成交量占比和實時價格加權計算得到渲染結果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結構里只能有一個有待考證。 Table 固定表頭只要在el-table元素中定義了height屬性，即可實現固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應用大多數是需要自適應占滿父元素，超出滾動固定表頭的...

Imfan 2019-08-02 11:51 評論0 收藏0
步步向前之Element-UI

摘要：無效方案根據交易所小時成交量占比和實時價格加權計算得到渲染結果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結構里只能有一個有待考證。 Table 固定表頭只要在el-table元素中定義了height屬性，即可實現固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應用大多數是需要自適應占滿父元素，超出滾動固定表頭的...

ZoomQuiet 2019-08-29 17:08 評論0 收藏0
Element UI table組件源碼分析

摘要：本文章從如下圖所示的最基本的入手，分析組件源代碼。本人已經對組件原來的源碼進行削減，源碼點擊這里下載。還有兩個重要的函數與。在組件的階段會調用更新，從而觸發重新渲染。例如當組件加載后發送請求，待請求響應賦值，重新渲染。本文章從如下圖所示的最基本的table入手，分析table組件源代碼。本人已經對table組件原來的源碼進行削減，源碼點擊這里下載。本文只對重要的代碼片段進行講解，推薦...

妤鋒シ 2019-08-26 12:09 評論0 收藏0
To Be Simple，基于elementUI的功能擴展組件系列1之Table篇

摘要：項目地址前言結合日常開發，封裝常用功能，提高開發效率。通用顯示效果支持類型類型文本鏈接文檔圖片用法相關屬性屬性參數說明類型可選值默認值動畫效果的列的配置對象，更多細節請參見列屬性。項目地址：tbs-ve-template 前言結合日常開發，封裝常用功能，提高開發效率。讓程序猿兄弟姐妹們也有時間約約女票，逗逗男票，做做自己想做的事情，不要天天在辦公室造輪子！ 1.通用Table 思路...

superPershing 2019-08-23 18:02 評論0 收藏0