使用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,
  },
  props: {
     
    // options: {
     
    //   type: [Array, Object],
    //   default: () => {
     
    //     return []
    //   },
    // },
    // tableValues: {
     
    //   type: [Array, Object],
    //   default: () => {
     
    //     return []
    //   },
    // },
  },
  data() {
     
    return {
     
      options: [
        {
      label: '日期', prop: 'date' },
        {
     
          label: '配送信息',
          prop: '',
          children: [
            {
      label: '姓名', prop: 'name' },
            {
     
              label: '地址',
              prop: '',
              children: [
                {
      label: '省份', prop: 'province' },
                {
      label: '市区', prop: 'city' },
                {
      label: '地址', prop: 'address' },
                {
      label: '邮编', prop: 'zip' },
              ],
            },
          ],
        },
      ],
      tableValues: [
        {
     
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路',
          zip: 200333,
        },
        {
     
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路',
          zip: 200333,
        },
      ],
    }
  },
  methods: {
     
    // 递归函数
    recursion(arrs) {
     
      return arrs.map((item) => {
     
        if (!!item.children) {
     
          return (
            <el-table-column label={
     item.label}>
              {
     this.recursion(item.children)}
            </el-table-column>
          )
        } else {
     
          return this.createElTableColumn(item.prop, item.label)
        }
      })
    },

    createElTableColumn(prop, label) {
     
      return <el-table-column prop={
     prop} label={
     label}></el-table-column>
    },
  },
  render(h) {
     
    return (
      <el-table
        border
        data={
     this.tableValues}
        style="width: 100%"
        style="width: 100%;margin: 20px 0;"
        class="merge-header-table"
        header-cell-style={
     () => {
     
          return {
      background: '#f9f9f9' }
        }}
      >
        {
     this.recursion(this.options)}
      </el-table>
    )
  },
}
</script>
<style lang="scss">
.merge-header-table {
     
  th,
  td {
     
    color: #767676;
    padding: 5px 0 !important;
  }
}
</style>