vue+render+jsx实现可编辑动态多级表头table

最近项目需要实现可编辑的动态多级表头表格，看了两天的文章，始终没有找到我想要的效果，在了解了render+jsx的基础用法后，自己基于element-ui封装了一个，数据格式参考element-ui table的数据。实现如下：

1.scoresTable

<script>
    import scoresColumn from "./scoresColumn";
    export default {
   
        components: {
   
            scoresColumn
        },
        render: function(h) {
   
            return <div className="table-control">
                <el-table ref="table"
                          size="small"
                          {
   ...{
   attrs: {
   data:this.tableData}}}
                          border
                >
                    {
   
                        this.tableTitles.map(title => {
   
                            return <scoresColumn on-dataChange={
   this.dataChange} {
   ...{
   attrs: {
   column:title,unitScores: this.unitScores}}}></scoresColumn>
                        })
                    }

                </el-table>
            </div>;
        },
        props: {
   
            tableTitles: {
   
                type: Array,
                default: () => []
            },
            tableData: {
   
                type: Array,
                default: () => []
            },
            unitScores: {
   
                type: Object,
                default: () => {
   }
            }
        },
        methods: {
   
            dataChange(id) {
   
                this.$emit('dataChange', id);
            }
        },
    }
</script>
<style>
  .el-table th, .el-table td {
   
    text-align: center;