ElementUI中el-table表格組件如何自定義表頭

更新時間：2023年09月12日 09:44:48 作者：Hayley2016

最近需要做一個el-table的表格,表頭需要顯示提示信息,本文主要介紹了ElementUI中el-table表格組件如何自定義表頭,具有一定的參考價值,感興趣的可以了解一下

問題概述

鼠標移動到el-table表格組件的表頭顯示提示信息，也算是自定義表頭的一種吧。

效果圖：（寶寶不會做動圖，寶寶心里苦?。。。?/p>

1. ElementUI2.0組件庫el-table表格組件常規(guī)用法

先貼上ElementUI2.0組件庫的官網(wǎng)地址：http://element-cn.eleme.io/#/zh-CN ，百度搜索“element”第一個就是啦。

平常使用el-table表格組件是這樣的：

1. 給表格傳參，tableData是一個數(shù)組。

tableData = [
  {date: '2018-01-01',tradeCount: 200, tradeSum: 100}, 
  {date: '2018-01-01', tradeCount: 200,tradeSum: 100}
]

2. 在<el-table-column>中用prop屬性來對應(yīng)對象中的鍵名即可填入數(shù)據(jù)。

3. 用label屬性來定義表格的列名。可以使用width屬性來定義列寬。

4. 表格組件中默認文本居左顯示。align=”right”屬性可設(shè)置文本向右顯示，當然還有 left、 center 等屬性值。

5. 若想在單元格中自定義，要用<template>標簽包裹起來，slot-scope屬性傳參，scope.row取值。

6. 添加事件。

7. 表格還有很多豐富的參數(shù)，根據(jù)項目需求選擇合適的參數(shù)吧！

有了對于el-table的基本了解之后，下面開始正式介紹如何在el-table表格組件中自定義表頭?。?！

2. render-header屬性了解一下

我們不能直接在prop屬性直接傳遞一個組件或者html元素。正確的做法是：Table組件提供了render-header屬性，可以好好利用一番。

這是官網(wǎng)對render-header屬性的描述

3. 解決辦法--JSX語法

1. 在<el-table-column>中傳入render-header屬性

<el-table-column align="right" :render-header="renderHeader">
    <template slot-scope="scope">{{scope.row.collected}}</template>
</el-table-column>

2. 在methods自定義renderHeader方法，return (<div></div>)是JSX語法，詳見官網(wǎng) https://cn.vuejs.org/v2/guide/render-function.html#JSX

renderHeader(h, { column, $index }){
  return (
    <div>
        <span>實收總金額(元) </span>
        <el-tooltip class="item" effect="dark" content="實收總金額 = 收款總金額 - 退款總金額"  placement="bottom">
          <i class="el-icon-warning table-msg"></i>
        </el-tooltip>
    </div>
  )
}

3. npm run dev 編譯項目之后，報錯，要使用jsx語法需要先安裝編譯插件

4. 安裝JSX語法編譯工具

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-es2015\
  --save-dev

5. 配置.babelrc文件

{
  "presets": ["es2015"],
  "plugins": ["transform-vue-jsx"]
}

4. 解決辦法--渲染函數(shù)

可直接使用渲染函數(shù)，不使用JSX語法，就不需要安裝額外的編譯插件啦

renderHeader(h, data) {
    return h("div", [
        h("span", ['實收總金額(元) ']),
        h("el-tooltip", {
            attrs: {
                class: "item",
                effect: "dark",
                content: "實收總金額 = 收款總金額 - 退款總金額",
                placement: "bottom"
            }
        }, [
            h("i", {
                'class': 'el-icon-warning table-msg'
            })
        ])
    ])
}

h 作為 createElement 的別名是 Vue 生態(tài)系統(tǒng)中的一個通用慣例，實際上也是 JSX 所要求的，如果在作用域中 h 失去作用，在應(yīng)用中會觸發(fā)報錯

問題匯總：

1. 博主根據(jù)實際項目情況，編寫了這篇博文。存在一個坑????

看到這個小小的i標簽沒有，就是它。有同學(xué)直接拷貝代碼之后，因為沒有對這個i 標簽設(shè)置樣式。也就沒有鼠標上移顯示tooltip的效果了。因為將上文我們的tooltip組件翻譯成HTML代碼是這樣的：（我們把鼠標放到i標簽上才能顯示tooltip哦）

<div>
  <span>實收總金額(元) </span>
  <el-tooltip class="item" effect="dark" content="實收總金額 = 收款總金額 - 退款總金額" placement="bottom">
    <i class="el-icon-warning table-msg"></i>
  </el-tooltip>
</div>

2. 渲染函數(shù)的語法規(guī)則詳見 https://cn.vuejs.org/v2/guide/render-function.html，自己多寫幾遍就能明白啦！

對于如何在自定義表頭添加事件，可以查看《createElement參數(shù)——深入data對象》

到此這篇關(guān)于ElementUI中el-table表格組件如何自定義表頭的文章就介紹到這了,更多相關(guān)el-table自定義表頭內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: