使用vue render jsx 实现element-ui table组件合并表头功能

实现后的效果图

1. 先安装 jsx 的依赖包

npm install postcss-loader autoprefixer babel-loader babel-core

2. 配置 babel.config.js 文件中添加

// babel.config.js
module.exports = {
   
  "presets": [...],
  "plugins": [...],
  'env': {
   
    "text": {
   
      "presets": ["es2015"],
      "plugins": ["transform-vue-jsx"]
    }
  }
} 

3. 创建一个新的vue文件 mergeHeaderTable.vue

// mergeHeaderTable.vue
<script>
import {
    Table, TableColumn } from 'element-ui'
export default {
   
  name: 'MergeHeaderTable',
  components: {
   
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,