ElementUI2.0組件庫el-table表格組件如何自定義表頭？

效果圖：

 

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

1.安裝下列安裝包

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

　　 

2. 配置.babelrc文件

　　

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

3.template

<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <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="地址"></el-table-column>
    <el-table-column prop="address" label="操作" width="260" :render-header="renderHeader">
      <template slot-scope="scope">{{scope.row.address}}</template>
    </el-table-column>
  </el-table>
</template>

 

4.

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>

)

}

 

參考文檔：https://cn.vuejs.org/v2/guide/render-function.html

 h 作為 createElement 的別名是 Vue 生態系統中的一個通用慣例，實際上也是 JSX 所要求的，如果在作用域中 h 失去作用， 在應用中會觸發報錯

 

參考文檔：https://blog.csdn.net/qq_32614411/article/details/80880785    ElementUI2.0組件庫el-table表格組件如何自定義表頭？

哈哈哈，自己的水平還寫不到這么好的文檔，先模仿啦模仿~

 完整代碼：

 

<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <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="地址"></el-table-column>
    <el-table-column prop="address" label="操作" width="260" :render-header="renderHeader">
      <template slot-scope="scope">{{scope.row.address}}</template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1516 弄"
        }
      ]
    };
  },
  methods: {
    
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>
  )
}

  
    }

};
</script>

 

注：

渲染函數 & JSX目前只會如上圖這么簡單的方式，如何寫方法還在研究學習中，故不采用這種方法，而決定采用定位的方式...

學習的第一篇博客：

https://www.jianshu.com/p/7353974795dd