關注我的個人部落格:pinbolei.cn，獲取更多內容

render-header

render-header在官方文件中的介紹是這樣的：

修改列標題樣式

1.在列標題後面加一個圖示。

以element-ui官方文件一個table表格為例，我們在地址的後面加一個定位標誌的圖示，程式碼如下：

<template>
  <el-table
    :data="tableData2"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width=
 
"180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址" :render-header="renderHeader"> // 加入render事件
    </el-table-column>
  </el-table>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-
 
row {
    background: #f0f9eb;
  }
</style>

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      // render 事件
      renderHeader (h,{column}) { // h即為cerateElement的簡寫，具體可看vue官方文件
        return h(
          'div',
          [ 
            h('span', column.label),
            h('i', {
              class:'el-icon-location',
              style:'color:#409eff;margin-left:5px;'
            })
          ],
        );
       }
    },
    data() {
      return {
        tableData2: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }]
      }
    }
  }
</script>

效果如下：

2.在列標題後面新增一個單選框

還是以上面的程式碼為例，只寫關鍵程式碼：

...
// render 事件
renderHeader (h,{column}) { // h即為cerateElement的簡寫，具體可看vue官方文件
  return h(
   'div',
   [ 
     h('span', column.label),
     h('el-checkbox',{
       style:'margin-left:5px',
       on:{
         change:this.select // 選中事件 
       }
     })
   ],
 );
},
// 新增選中事件
select (data) {
  console.log(data);
}
...

效果如下：

3.在表頭新增一個Tooltip

我們經常會遇到一些奇怪的需求，但是即使再奇怪我們也不能認輸，現在有一個需求，要在列表表題後面新增一個提示，我們開始嘗試著做：

還是以上面的程式碼為例，剛開始我想直接用‘el-tooltip’，應該不是很難，然後就是這樣：

...
renderHeader (h,{column}) {
  return h(
    'div',
    [ 
      h('span', column.label),
      h('el-tooltip',[
        h('i', {
          class:'el-icon-question',
          style:'color:#409eff;margin-left:5px;'
        })
      ],{
        content: '這是一個提示'
      })
    ]
  );
}
...

執行後發現，基本樣式出來了，但是提示沒有

根據element-ui 關於tooltip的文件，我發現不管是effect, content還是placement 對tooltip都不管用，既然硬上不管用，就曲線救國，通過元件的方法，先造個輪子再走路

// 寫一個PromptMessage的元件，並全域性註冊
<template>
  <div class="tooltip">
    <el-tooltip effect="dark" placement="right">
      <div slot="content"> // 插槽，可提供多行的提示資訊
        <p v-for="item in messages" :key="item">
          {{item}}
        </p>
      </div>
      <i class="el-icon-question" style="color:#409eff;margin-left:5px;font-size:15px;"></i>
    </el-tooltip>
  </div>
</template>

<script>
  export default {
    props:['messages']
  };
</script>

然後在render-header事件中使用元件

...
renderTip (h,{column}) {
  return h(
    'div',{
      style:'display:flex;margin:auto;'
    },
    [
      h('span', column.label),
      h('prompt-message', {
        props: {messages: ["這是住址資訊"]}
      })
    ]
  );
}
...

這次我們發現，果然造的輪子還是挺不錯的

JSX語法

或許你會發現，這個原生的createElement 寫起來並不簡單，而且很費事，我們也可以採用JSX的方式，這個在Vue官方文件中有提到

檢視文件，可以找到安裝使用的方法

安裝完成後想要再實現tooltip就簡單了

...
renderTip (h,{column}) {
  return (
    <el-tooltip class="tooltip" effect="dark" placement="right">
      <ul slot="content">
        <li>這是第一個提示</li>
        <li>這是第二個提示<li>
      </ul>
      <i class="el-icon-question"></i>
    </el-tooltip>
  );
}
...

這樣看著很好理解，寫起來也很方便