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

最新推荐文章于 2026-03-07 00:32:08 发布

原创

最新推荐文章于 2026-03-07 00:32:08 发布 · 1.1k 阅读

本文介绍了如何利用Vue、Render和JSX来实现一个可编辑的动态多级表头表格。作者在研究了现有资料后，基于Element-UI进行了封装，数据格式参照了Element-UI的table数据模型。文章分为scoresTable、scoresColumn和实现效果三个部分进行详细讲解。

最近项目需要实现可编辑的动态多级表头表格，看了两天的文章，始终没有找到我想要的效果，在了解了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;