vue根据表头渲染数据

需要渲染的数据

data: {
    tableData: {
        thead: {
            num: '数字',
            chinese: '中文',
            english:'英文'
        },
        tbody: [
            {chinese: '一', num: 1, english: 'one'},
            {chinese: '二', num: 2, english: 'two'},
            {english: 'three', chinese: '三', num: 3}
        ]
    }
}

tbody数据中的key是乱序。

直接渲染效果

数字	中文	英文
一	1	one
二	2	two
three	三	3

    

        

            
{{item}}
        
    
    

        

            
{{item}}
        
    

期望的效果

数字	中文	英文
1	一	one
2	二	two
3	三	three

    

        

            
{{item}}
        
    
    

        

            
{{row[key]}}
        
    

取出每一行的json数据

取表头数据的key

根据thead中key，渲染每一行json数据

{{ row[key] }}

---

完整代码

    
        
        
        
    
    
        

            

                

                    

                        
{{item}}
                    
                
                

                    

                        
{{item}}
                    
                
            
            

            

                

                    

                        
{{item}}
                    
                
                

                    

                        
{{row[key]}}
                    
                
            
        

        
    

---

看了很多技术文章，自己也尝试写一下。感觉有些地方表述不够清晰，以后继续努力。