vue中原生表格的使用

因项目中需要大量的合并，而且表格左右布局，所以采用了原生table。
colspan和rowspan分别代表合并多少行多少列。

代码如下：
                    

                        

                            

                                
线路名称
                                
{{ item.lineName }}
                            
                            

                                
巡检区段
                                
{{ item.scope }}
                            
                            

                                
运维管理单位
                                
{{ item.operationAndMaintenanceCompany }}
                            
                            

                                
运检作业单位
                                
{{ item.insWorkCompany }}
                            
                            

                                
巡检员
                                
{{ item.droneWorkUser }}
                            
                            

                                
飞机型号
                                
{{ item.droneType }}
                                
操控手
                                
{{ item.workUserName }}
                            
                            

                                
巡检方式
                                
{{ item.workType }}
                                
√
                            

                            

                                
红外仪器
                                
{{ item.deviceName }}
                            
                            

                                
分辨率
                                
{{ item.resolution }}
                            
                            

                                
镜头
                                
{{ item.lens }}
                            

                            

                                
巡检时间
                                
{{ item.insTime }}
                            
                            

                                
当地天气
                                
{{ item.weather }}
                            
                            

                                
运行工况
                                
{{ item.operatingConditions }}
                            
                            

                                
备注
                                
{{ item.remark }}
                            
                        
                    
data() {
        return {
            tableData: [
                {
                    lineName: '九彩线',
                    scope: '1#-5#',
                    operationAndMaintenanceCompany: '北京星闪世图',
                    insWorkCompany: '北京星闪世图',
                    droneWorkUser: '张三',
                    droneType: '大疆无人机',
                    workUserName: '王五',
                    workType: '红外',
                    deviceName: 'KDLL-1',
                    resolution: '640*220',
                    lens: '镜头',
                    insTime: '2021.04.20',
                    weather: 'sunny',
                    operatingConditions: '运行工况',
                    remark: '无'
                }
            ],
        };
    },
    mounted() {
        getAnalysis({ insId: this.$route.query.id }).then((res) => {
            if (res.code == 200) {
                this.DataTable = res.data;
                this.tableData = this.DataTable.insOverview;//后台返回的数据
            } else {
                this.$message({
                    type: 'error',
                    message: res.msg
                });
            }
        });
    }