elementUI 表格table-column列顺序错乱解决

问题

需要遍历渲染的table列的顺序为:

              this.list = [
                {
                  label: '地区',
                  prop:  'province'
                },
                {
                  label: '合计',
                  children: [
                    {
                      label: '合计',
                      prop: 'totalCount'
                    },
                    {
                      label: '沪主板',
                      prop: 'shzb'
                    },
                    {
                      label: '科创板',
                      prop: 'kcb'
                    },
                    {
                      label: '深主板',
                      prop: 'szzb'
                    },
                    {
                      label: '创业板',
                      prop: 'cyb'
                    },
                    {
                      label: '北证',
                      prop: 'bjs'
                    }
                  ]
                },
                {
                  label: '本年新增',
                  children: [
                    {
                      label: '本年新增合计',
                      prop: 'qTotalCount'
                    },
                    {
                      label: '沪主板',
                      prop: 'shzb'
                    },
                    {
                      label: '科创板',
                      prop: 'kcb'
                    },
                    {
                      label: '深主板',
                      prop: 'szzb'
                    },
                    {
                      label: '创业板',
                      prop: 'cyb'
                    },
                    {
                      label: '北证',
                      prop: 'bjs'
                    }
                  ]
                }
              ]

渲染代码:

    
      
      
      
        

但是实际的效果却是:
image.png
合计应该放在第一列, 但是在实际渲染后却在最后一列, 出现了错乱

解决方式

将架构代码

        

中的div标签换成template

原因是el-table不能嵌套el-table-column以外的元素

https://github.com/ElemeFE/element/issues/1638
elementUI 表格table-column列顺序错乱解决_第1张图片

在我的情况中, 虽然是el-table-column嵌套el-table-column, 但是经过尝试方法依然是适用的, 问题解决:
image.png

你可能感兴趣的:(elementUI 表格table-column列顺序错乱解决)