此文首發於 lijing0906.github.io

目前所做的專案都是後臺管理系統，前端框架用的VUE，為了開發速度快，我們都會選擇合適的元件庫。誒！餓了麼團隊開發的elementUI就被我們選中啦。 用起來還是很順手的，後臺系統的基本功能都有示例程式碼，很方便，但是有些特殊的功能沒有示例程式碼，只是文件中有簡單的說明，這個只能去網上搜尋一些大神的部落格來幫忙啦。 因為所用的版本是2.0.11，所以本文所講都是該版本的表格，後續版本有新增另外的方法，注意看自己所用的版本號是否有本文所講的屬性。

攔路虎

如上圖，有時我們需要對錶頭欄位作一些解釋

打虎

elementUI官網只給了一個屬性解釋，沒有任何示例程式碼：

網上搜羅一番，結合自己的需求寫成如下程式碼： html程式碼如圖：

JS程式碼如下：

renderHeader(h, {column, $index}){
    return h(
        "el-popover",
        {
            props: {
                placement: "right",
                trigger: "hover",
                popperClass : "popperClassResOut"
            }
        },//此物件是定義el-popover的各屬性
        [
          // h(
          //     "div",
          //     [`解釋1：即巴拉巴拉爸爸不啦啦啦。`]
          // ),
          // h(
          //     "div",
          //     [`解釋2：即哈哈化歘持續哈哈航愛佔計劃。`]
          // ),
          // h(
          //     "div",
          //     [`解釋1及解釋2的反鳥返很久煩煩煩煩分行恆`]
          // ),
            h(
                "div",
                [
                    `解釋1：即巴拉巴拉爸爸不啦啦啦1。`, 
                    h('br'), 
                    `解釋2：即哈哈化歘持續哈哈航愛佔計劃1。`, 
                    h('br'), 
                    '解釋1及解釋2的反鳥返很久煩煩煩煩分行恆1'
                ]
            ),//這個h函式可以替代上方註釋的程式碼
            h(
                "span",
                {
                    slot: "reference"
                },
                [
                    column.label,
                    h("i", {
                        class: "el-icon-question",
                        style: {
                            marginLeft: "4px",
                            cursor: "pointer",
                            color: "#ea9518",
                        }
                    })
                ]
            ),//這個h函式是渲染問號圖示和被解釋的表頭欄位文字
        ]
    )
}
複製程式碼

仔細觀察上面的h函式，第一個引數：標籤名(字串)，第二個引數：標籤屬性(物件)，第三個引數：第一個引數的子元素(陣列)，陣列的元素又重複h函式。 其實這個h函式就是在寫html程式碼，其中的層級關係自己很好把握。

又有大老虎

如果表頭有篩選

打不死你才怪

那麼資料繫結有一些更改，如下圖:

JS程式碼如下：

renderHeader2(h, {column, $index}) {
    let filters = [{value:"", label:'全部'}];
    for(let item in column.filteredValue){
        filters.push(column.filteredValue[item])
    }
    return h('div',{
        style: {
            height: '30px'
        },
    },
    [
        h(
            "el-select",
            {
            props: {
                placeholder: '',
                value: column.label,  //‘姓名’
                clearable: false,
                popperClass:'popperClassResOut',
            },
            class: 'filtersSelect', //下拉選擇框的類名，方便調整樣式
            on: {
                input: value => {
                    if(value != ''){
                        column.label = column.filterPlacement+'('+value+')'
                    }else{
                        column.label = column.filterPlacement+'(全部)'
                    }
                    // this.callback && this.callback();
                }
            } //下拉選擇觸發的事件
            },
            [
            filters.map(item => {
                return h("el-option", {
                props: {
                    value: item.value,
                    label: item.label
                }
                });
            })
            ] //下拉選項
        )
    ])
},
複製程式碼

下拉框的樣式如下：

#elerenderheader .filtersSelect{
    vertical-align: middle;
    padding: 0px;
    margin: 0px;
}
#elerenderheader .filtersSelect div{
    white-space: normal;
    padding: 0px;
    margin: 0px;
}
#elerenderheader .filtersSelect .el-input input{
    background-color: transparent;
    border: none;
    width: 110px;
    padding: 0 5px;
    font-size: bold;
}
#elerenderheader .filtersSelect .el-input__icon{
    width: 16px;
    height: 16px;
    background-image: url("../assets/ic_sx.png"); //漏斗圖示
    background-size:16px 16px;
    background-repeat:no-repeat;
    vertical-align: middle;
}
#elerenderheader .filtersSelect .el-input__icon:before{
    content: '';
}
#elerenderheader .filtersSelect .el-select__caret{
    transform: none;
    -webkit-transform:none;
}
複製程式碼