diff --git a/src/component/main/verticalTable/verticalTable.vue b/src/component/main/verticalTable/verticalTable.vue
index e165d30afde2cfdd1166339b5883154f08398ff9..677f942bb924d856d87c211585cbf80da6d8963c 100644
--- a/src/component/main/verticalTable/verticalTable.vue
+++ b/src/component/main/verticalTable/verticalTable.vue
@@ -11,10 +11,12 @@ const objectSpanMethod = ({
   columnIndex,
 }) => {
   if (columnIndex === 0) {
-    if (rowIndex % 4 === 0) {
+    const reg = /[一-龥]/;
+    if(row.headline.search(reg) != -1){
+      console.log();
       return {
-        rowspan: 4,
-        colspan: 1,
+        rowspan: rowSpan.get(row.id),
+        colspan: 1
       }
     } else {
       return {
@@ -25,44 +27,82 @@ const objectSpanMethod = ({
   }
 }
 
-const tableData = [
-  {
-    id: '12987122',
-    name: 'Tom',
-    amount1: '234',
-    amount2: '3.2',
-    amount3: 10,
-  },
-  {
-    id: '12987123',
-    name: 'Tom',
-    amount1: '165',
-    amount2: '4.43',
-    amount3: 12,
-  },
-  {
-    id: '12987124',
-    name: 'Tom',
-    amount1: '324',
-    amount2: '1.9',
-    amount3: 9,
-  },
-  {
-    id: '12987125',
-    name: 'Tom',
-    amount1: '621',
-    amount2: '2.2',
-    amount3: 17,
-  },
-  {
-    id: '12987126',
-    name: 'Tom',
-    amount1: '539',
-    amount2: '4.1',
-    amount3: 15,
-  },
-]
 
+const tableData = ref([
+{id:'1',headline:'系统管理',subtitle:'系统配置',operation1:'新建/编辑',operation2:'删除',operation3:'编辑',operation4:'',operation5:''},
+{id:'2',headline:'',subtitle:'功能模块',operation1:'安装',operation2:'升级',operation3:'卸载',operation4:'',operation5:''},
+{id:'3',headline:'',subtitle:'功能节点',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
+{id:'4',headline:'',subtitle:'角色权限',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
+{id:'5',headline:'',subtitle:'数据权限',operation1:'编辑',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'6',headline:'',subtitle:'操作日志',operation1:'备份数据',operation2:'备份数据表',operation3:'优化数据表',operation4:'修复数据表',operation5:''},
+{id:'7',headline:'',subtitle:'还原数据',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'8',headline:'基础数据',subtitle:'审批类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'9',headline:'',subtitle:'审批流程',operation1:'新建/编辑',operation2:'删除',operation3:'设置',operation4:'',operation5:''},
+{id:'10',headline:'',subtitle:'报销类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'11',headline:'',subtitle:'费用类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'12',headline:'',subtitle:'企业主体',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'13',headline:'',subtitle:'行业类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'14',headline:'',subtitle:'工作类别',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'15',headline:'',subtitle:'服务类型',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'16',headline:'',subtitle:'附件管理',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'17',headline:'人力资源',subtitle:'部门架构',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
+{id:'18',headline:'',subtitle:'岗位职称',operation1:'新建/编辑',operation2:'删除',operation3:'查看',operation4:'',operation5:''},
+{id:'19',headline:'',subtitle:'企业员工',operation1:'新建/编辑',operation2:'查看',operation3:'设置',operation4:'重设密码',operation5:''},
+{id:'20',headline:'',subtitle:'人事调动',operation1:'新建/编辑',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'21',headline:'',subtitle:'离职档案',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'22',headline:'行政管理',subtitle:'印章管理',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'23',headline:'',subtitle:'车辆管理',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'24',headline:'',subtitle:'会议室管理',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'25',headline:'企业公告',subtitle:'公告类型',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
+{id:'26',headline:'',subtitle:'公告列表',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'27',headline:'办公审批',subtitle:'我发起的',operation1:'新建/编辑',operation2:'查看',operation3:'',operation4:'',operation5:''},
+{id:'28',headline:'',subtitle:'我处理的',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'29',headline:'',subtitle:'抄送给我的',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'30',headline:'日常办公',subtitle:'日程安排',operation1:'新建/编辑',operation2:'删除',operation3:'查看',operation4:'',operation5:''},
+{id:'31',headline:'',subtitle:'日程日历',operation1:'工作记录',operation2:'新建/编辑',operation3:'删除',operation4:'查看',operation5:'更改工时'},
+{id:'32',headline:'',subtitle:'工作日历',operation1:'工作汇报',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'33',headline:'财务管理',subtitle:'报销管理',operation1:'我申请的',operation2:'我处理的',operation3:'抄送给我的',operation4:'',operation5:''},
+{id:'34',headline:'',subtitle:'发票管理',operation1:'我申请的',operation2:'我处理的',operation3:'抄送给我的',operation4:'',operation5:''},
+{id:'35',headline:'',subtitle:'到账管理',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'36',headline:'客户管理',subtitle:'客户等级',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'37',headline:'',subtitle:'客户渠道',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'38',headline:'',subtitle:'客户列表',operation1:'新建/编辑',operation2:'查看',operation3:'获取',operation4:'转入公海',operation5:''},
+{id:'39',headline:'',subtitle:'公海客户',operation1:'分配客户',operation2:'转入废弃池',operation3:'',operation4:'',operation5:''},
+{id:'40',headline:'',subtitle:'废弃客户',operation1:'删除',operation2:'还原',operation3:'',operation4:'',operation5:''},
+{id:'41',headline:'',subtitle:'客户联系人',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
+{id:'42',headline:'',subtitle:'销售机会',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'43',headline:'合同协议',subtitle:'合同类别',operation1:'新建/编辑',operation2:'设置',operation3:'',operation4:'',operation5:''},
+{id:'44',headline:'',subtitle:'合同列表',operation1:'新建/编辑',operation2:'查看',operation3:'删除',operation4:'',operation5:''},
+{id:'45',headline:'',subtitle:'合同归档',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'46',headline:'项目管理',subtitle:'项目列表',operation1:'新建',operation2:'编辑',operation3:'查看',operation4:'删除',operation5:''},
+{id:'47',headline:'',subtitle:'任务列表',operation1:'新建',operation2:'编辑',operation3:'查看',operation4:'删除',operation5:''},
+{id:'48',headline:'',subtitle:'任务工时',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'49',headline:'',subtitle:'文档列表',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'50',headline:'知识文章',subtitle:'知识类型',operation1:'新建/编辑',operation2:'删除',operation3:'',operation4:'',operation5:''},
+{id:'51',headline:'',subtitle:'共享知识',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+{id:'52',headline:'',subtitle:'个人知识',operation1:'',operation2:'',operation3:'',operation4:'',operation5:''},
+]);
+
+const computedSpan = ()=>{
+  const return_data = new Map();
+  const reg = /[一-龥]/;
+  let tempCount = 1;
+  let preIndex = 1;
+  for(let i = 0;i < tableData.value.length;i++){
+    if(tableData.value[i].headline.search(reg) != -1){
+      return_data.set(preIndex,tempCount);
+      preIndex = tableData.value[i].id;
+      tempCount = 1;
+    }else{
+      tempCount++;
+    }
+  }
+  return_data.set(preIndex,tempCount);
+  return_data.delete(1);
+  return return_data;
+}
+const rowSpan = computedSpan();
+console.log(computedSpan());
 </script>
 
 <template>
@@ -75,13 +115,17 @@ const tableData = [
     >
       <el-table-column prop="id" label="ID" width="180" >
         <template #default="{ row }">
-          <el-checkbox >{{ row.id }}</el-checkbox>
+          <el-checkbox >{{ row.headline }}</el-checkbox>
         </template>
       </el-table-column>
       <el-table-column prop="name" label="Name" >
         <template #default="{ row }">
-          <el-checkbox >{{ row.name }}</el-checkbox>
-
+          <el-checkbox v-show="row.subtitle != ''">{{ row.subtitle }}</el-checkbox><br>
+          <el-checkbox v-show="row.operation1 != ''">{{ row.operation1 }}</el-checkbox>
+          <el-checkbox v-show="row.operation2 != ''">{{ row.operation2 }}</el-checkbox>
+          <el-checkbox v-show="row.operation3 != ''">{{ row.operation3 }}</el-checkbox>
+          <el-checkbox v-show="row.operation4 != ''">{{ row.operation4 }}</el-checkbox>
+          <el-checkbox v-show="row.operation5 != ''">{{ row.operation5 }}</el-checkbox>
         </template>
       </el-table-column>
     </el-table>