效果图：
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.
参考文档：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表格组件如何自定义表头？
哈哈哈，自己的水平还写不到这么好的文档，先模仿啦模仿~
注：
渲染函数 & JSX目前只会如上图这么简单的方式，如何写方法还在研究学习中，故不采用这种方法，而决定采用定位的方式...
学习的第一篇博客：
https://www.jianshu.com/p/7353974795dd
ElementUI2.0组件库el-table表格组件如何自定义表头？
原文：https://www.cnblogs.com/DZzzz/p/11300198.html