预算与实际统计页面

src/views/static/actual.vue

@@ -71,13 +71,13 @@
                         <TabAll/>
                     </template>
                     <template #tab-month>
-                        <div>22222</div>
+                        <TabMonth/>
                     </template>
                     <template #tab-decost>
-                        333
+                        <TabDecost/>
                     </template>
                     <template #tab-mannager>
-                        44
+                        <TabManager/>
                     </template>
         
          </HcTabsSimple>
@@ -87,6 +87,9 @@
  <script setup>
  import {ref, watch} from "vue";
  import TabAll from './components/tab-all.vue'
+ import TabMonth from './components/tab-month.vue'
+ import TabDecost from './components/tab-decost.vue'
+ import TabManager from './components/tab-mannager.vue'
 
 const importModalClick=()=>{
 

src/views/static/components/tab-all.vue

@@ -1,5 +1,5 @@
 <template>
-          <div class="bg-white p-2" >
+          <div class="bg-white p-2  table_box" >
             <el-row :gutter="14" style="justify-content: flex-end;">
             
                 <div class="w-36 ml-4 mr-2" >
@@ -8,8 +8,8 @@
                     </el-select>
                 </div>
             </el-row>
-            <div class="table_box">
-                <el-table :data="tableData" border class="mt-4"  v-if="costcheck==1">
+            
+                <el-table :data="tableData" border class="mt-4"  v-if="costcheck==1" :header-cell-style="headerStyle">
                 <el-table-column v-for="item in tableColData"  align="center"
                 :prop="item.id"
                 :label="item.name"
@@ -44,14 +44,14 @@
                 
                 ></el-table-column>
             </el-table>
-            </div>
+         
         
                        
          </div>
 </template>
 
 <script setup>
-import {ref, watch} from "vue";
+import {ref, watch,nextTick} from "vue";
 
 const props = defineProps({
     cur: {
@@ -89,11 +89,36 @@ const tableData=ref([
 const tableColData=ref([
         {
           id: 'time',
-          name: '时间'
+          name: '时间',
+          children:[
+            {
+              id: 'time',
+              name: '时间',
+              children:[
+                {
+                  id: 'time',
+                  name: '时间',
+                }
+              ]
+            }
+          ]
         },
         {
           id: 'beginremain',
-          name: '期初上账余额'
+          name: '期初上账余额',
+          children:[
+            {
+              id: 'beginremain',
+              name: '期初上账余额',
+              children:[
+                {
+                  id: 'beginremain',
+                  name: '期初上账余额',
+                  
+                }
+              ]
+            }
+          ]
         },
         {
           id: 'beginremain',
@@ -101,41 +126,91 @@ const tableColData=ref([
           children:[
                 {
                 id: 'beginremain',
-                name: '计划回款'
+                name: '计划回款',
+                children:[
+                  {
+                    id: 'beginremain',
+                    name: '计划回款',
+                   
+                  }
+                ]
                 },
                 {
                 id: 'beginremain',
-                name: '项目回款'
+                name: '项目回款',
+                children:[
+                    {
+                      id: 'beginremain',
+                       name: '项目回款',
+                       
+                    }
+                ]
                 },
                 {
                 id: 'beginremain',
-                name: '营业外收入'
+                name: '营业外收入',
+                children:[
+                  {
+                    id: 'beginremain',
+                    name: '营业外收入',
+                  }
+                ]
                 },
                 {
                 id: 'beginremain',
-                name: '过账资金'
+                name: '过账资金',
+                children:[
+                  {
+                    id: 'beginremain',
+                    name: '过账资金',
+                  }
+                ]
                 },
                 {
                 id: 'beginremain',
-                name: '项目保证金、押金退回'
+                name: '项目保证金、押金退回',
+                children:[
+                  {
+                    id: 'beginremain',
+                    name: '项目保证金、押金退回',
+                  }
+                ]
                 },
           ]
         },
         {
-          id: 'beginremain',
+          id: 'beginremain8',
           name: '借还款',
           children:[
                 {
                 id: 'beginremain',
-                name: '借入'
+                name: '借入',
+                children:[
+                  {
+                    id: 'beginremain',
+                    name: '借入',
+                  }
+                ]
                 },
                 {
                 id: 'beginremain',
-                name: '偿还本金'
+                name: '偿还本金',
+                children:[
+                  {
+                    id: 'beginremain',
+                    name: '偿还本金',
+                  }
+                ]
                 },
                 {
                 id: 'beginremain',
-                name: '偿还利息'
+                name: '偿还利息',
+                children:[
+                  {
+                    id: 'beginremain',
+                    name: '偿还利息',
+                  }
+                ]
                 },
           
               
@@ -148,11 +223,25 @@ const tableColData=ref([
           children:[
                 {
                 id: 'beginremain',
-                name: '员工借款'
+                name: '员工借款',
+                children:[
+                  {
+                    id: 'beginremain',
+                    name: '员工借款',
+                  }
+                ]
                 },
                 {
                 id: 'beginremain',
-                name: '员工借支还款'
+                name: '员工借支还款',
+                children:[
+                  {
+                    id: 'beginremain',
+                    name: '员工借支还款',
+                  }
+                ]
+                
+                
                 },
                 {
                 id: 'beginremain',
@@ -185,7 +274,7 @@ const tableColData=ref([
                     {
                     id: 'beginremain',
                     name: '综合报销'
-                    },  {
+                    }, {
                     id: 'beginremain',
                     name: '费用合计'
                     },
@@ -198,11 +287,14 @@ const tableColData=ref([
        
         {
           id: 'beginremain',
-          name: '期末账上余额'
+          name: '期末上账余额',
+  
+   
         },
         {
           id: 'beginremain',
-          name: '本月未支付'
+          name: '本月未支付',
+         
         },
 
 ])
@@ -259,6 +351,53 @@ const otherColData=ref([
           name: '回款金额'
         },
 ])
+//合并
+
+const headerStyle=({ row, column, rowIndex, columnIndex })=>{
+    const comStyle = {  };
+      // 1.1 让第0行的第0列跨2行
+      if (rowIndex === 0 && columnIndex === 0
+      ||rowIndex === 0 && columnIndex === 1
+  
+      )
+       {
+        nextTick(() => {
+          document
+            .getElementsByClassName(column.id)[0]
+            .setAttribute("rowSpan", 3);
+         
+          return comStyle;
+        });
+      }else if(
+          rowIndex === 1 && columnIndex === 2
+          ||rowIndex === 1 && columnIndex === 3
+          ||rowIndex === 1 && columnIndex === 4
+          ||rowIndex === 1 && columnIndex === 5
+          ||rowIndex === 1 && columnIndex === 6
+          ||rowIndex === 1 && columnIndex === 7
+          ||rowIndex === 1 && columnIndex === 8
+          ||rowIndex === 1 && columnIndex === 9
+          ||rowIndex === 1 && columnIndex === 10
+          ||rowIndex === 1 && columnIndex === 11
+      ){
+        nextTick(() => {
+          document
+            .getElementsByClassName(column.id)[0]
+            .setAttribute("rowSpan", 2);
+         
+          return comStyle;
+      })
+    }
+      // 1.2 被覆盖的进行隐藏
+      if (rowIndex === 1 && (columnIndex == 0 ||columnIndex == 1)) {
+        return {
+          display: "none",
+          ...comStyle,
+        };
+      }
+
+      return comStyle;
+}
 const costcheck=ref('1')
 </script>
 

src/views/static/components/tab-decost.vue

@@ -1 +1,178 @@
-<template></template>
+<template>
+    <div class="bg-white p-2 table_box" >
+     
+          <el-table :data="tableData" border class="mt-4"   :header-cell-style="headerStyle" >
+          <el-table-column v-for="item in tableColData"  align="center"
+          :prop="item.id"
+          :label="item.name"
+          :key="item.name"
+        
+          >
+              <el-table-column v-for="item1 in item.children" align="center"
+                  :prop="item1.id"
+                  :label="item1.name"
+                  :key="item1.name">
+                 
+              </el-table-column>
+          </el-table-column>
+      </el-table>
+
+                 
+   </div>
+</template>
+
+<script setup>
+import {ref, watch,nextTick} from "vue";
+
+const props = defineProps({
+cur: {
+  type: [String,Number],
+  default: ''
+},
+})
+
+const tabsKey = ref(props.cur)
+
+//监听
+watch(() => [
+props.cur,
+], ([key]) => {
+tabsKey.value = key
+console.log(key)
+})
+
+
+const tableData=ref([
+
+{time:'二月',market:'2000',precost:1000,realcost:2000},
+{time:'三月',beginremain:'2000'},
+{time:'四月',beginremain:'2000'},
+{time:'五月',beginremain:'2000'},
+{time:'六月',beginremain:'2000'},  
+{time:'七月',beginremain:'2000'},
+{time:'八月',beginremain:'2000'},
+{time:'九月',beginremain:'2000'},
+{time:'十月',beginremain:'2000'},
+{time:'十一月',beginremain:'2000'},
+{time:'十二月',beginremain:'2000'},
+
+
+
+])
+const tableColData=ref([
+  {
+    id:'time',
+    name: '时间',
+    children:[
+        { id:'time',
+        name: '时间',}
+    ]
+  },
+  
+ {
+        id: 'market',
+        name: '市场部',
+        children:[
+            {
+            id: 'precost',
+            name: '预算支出'
+            },
+            {
+            id: 'realcost',
+            name: '实际支出'
+            },
+    
+        ]
+    },
+    {
+        id: 'technology',
+        name: '研发部',
+        children:[
+            {
+            id: 'precost',
+            name: '预算支出'
+            },
+            {
+            id: 'realcost',
+            name: '实际支出'
+            },
+    
+        ]
+    },
+    {
+        id: 'implement',
+        name: '实施部',
+        children:[
+            {
+            id: 'precost',
+            name: '预算支出'
+            },
+            {
+            id: 'realcost',
+            name: '实际支出'
+            },
+    
+        ]
+    },
+    {
+        id: 'maintenance',
+        name: '维修部',
+        children:[
+            {
+            id: 'precost',
+            name: '预算支出'
+            },
+            {
+            id: 'realcost',
+            name: '实际支出'
+            },
+    
+        ]
+    },
+    {
+        id: 'mannager',
+        name: '管理中心',
+        children:[
+            {
+            id: 'precost',
+            name: '预算支出'
+            },
+            {
+            id: 'realcost',
+            name: '实际支出'
+            },
+    
+        ]
+    },
+    
+])
+//合并
+
+const headerStyle=({ row, column, rowIndex, columnIndex })=>{
+    const comStyle = { backgroundColor: "" };
+      // 1.1 让第0行的第0列跨2行
+      if (rowIndex === 0 && columnIndex === 0) {
+        nextTick(() => {
+          document
+            .getElementsByClassName(column.id)[0]
+            .setAttribute("rowSpan", 2);
+          return comStyle;
+        });
+      }
+      // 1.2 被覆盖的进行隐藏
+      if (rowIndex === 1 && (columnIndex == 0  )) {
+        return {
+          display: "none",
+          ...comStyle,
+        };
+      }
+
+      return comStyle;
+}
+
+const costcheck=ref('1')
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/static/components/tab-mannager.vue

@@ -1,283 +1,140 @@
 <template>
-    <HcCard>
-        <div class="hc-page-layout-box system-parameter">
-            <HcCardItem ui="hac-card-item w-60 mr-5">
-                <template #header>
-                    <span class="mr-2">财务预算分类:</span>
-                    <el-button _icon hc-btn size="small" type="primary" @click="openpriceEdit(1)">
-                        <HcIcon name="add"/>
-                    </el-button>
-                </template>
-                <div> <span class="mt-2">预算一级科目:</span></div>
-                <div class="hc-layout-left-box menu mt-3">
-                    <div class="hc-menu-contents-box">
-                        <el-scrollbar>
-                            <HcMenuSimple :datas="menuOptions" :keys="menuKey" :props="menusProps"
-                                          :menus="contextMenu" @menuTap="contextMenuClick"
-                                          @change="menuChange"/>
-                        </el-scrollbar>
-                    </div>
-
-                    <!--预算分类新增编辑弹窗-->
-                    <HcDialog bgColor="#ffffff" widths="22rem" isToBody :show="priceModal" :title="priceTitle" @close="priceModalClose">
-                        <el-form :model="priceform" label-position="top" label-width="auto" size="large">
-                            <el-form-item label="预算一级科目名称:">
-                                <el-input v-model="priceform.name"/>
-                            </el-form-item>
-                        </el-form>
-                    </HcDialog>
-                </div>
-            </HcCardItem>
-
-            <div class="hc-page-content-box">
-                <HcCardItem ui="hac-card-item" actionSize="lg">
-                    <template #header>
-                        <span class="mr-2">预算二级科目:</span>
-                        <el-button _icon hc-btn size="small" type="primary" @click="openEdit(1)">
-                            <HcIcon name="add"/>
-                        </el-button>
-                    </template>
-                    <HcTable :column="tableColumn" :datas="tableData"  :isIndex="false">
-                        <template #action="{row, index}">
-                            <el-button size="small" type="primary" @click="openEdit(2)">编辑</el-button>
-                            <el-button size="small" type="primary" @click="delTask">删除</el-button>
-                        </template>
-                    </HcTable>
-
-                    <!--任务明细弹窗-->
-                    <HcDialog bgColor="#ffffff" widths="24rem" isToBody :show="editTaskModal" :title="taskTitle" @close="testModalClose">
-                        <el-form label-position="top" label-width="auto" :model="formLabelAlign" size="large">
-                            <el-form-item label="预算二级科目名称:">
-                                <el-input v-model="formLabelAlign.name"/>
-                            </el-form-item>
-                        </el-form>
-                    </HcDialog>
-
-                </HcCardItem>
-            </div>
-        </div>
-        <template #action>
-            <HcPages :pages="searchForm" @change="pageChange"/>
-        </template>
-    </HcCard>
+    <div class="bg-white p-2 table_box" >
+     
+          <el-table :data="tableData" border class="mt-4"       :header-cell-style="headerStyle"
+>
+          <el-table-column v-for="item in tableColData"  align="center"
+          :prop="item.id"
+          :label="item.name"
+          :key="item.name"
+        
+          >
+              <el-table-column v-for="item1 in item.children" align="center"
+                  :prop="item1.id"
+                  :label="item1.name"
+                  :key="item1.name">
+                 
+              </el-table-column>
+          </el-table-column>
+      </el-table>
+
+                 
+   </div>
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from "vue";
+import {ref, watch,nextTick} from "vue";
+
 
 const props = defineProps({
-    cur: {
-        type: [String,Number],
-        default: ''
-    },
+cur: {
+  type: [String,Number],
+  default: ''
+},
 })
 
 const tabsKey = ref(props.cur)
 
 //监听
 watch(() => [
-    props.cur,
+props.cur,
 ], ([key]) => {
-    tabsKey.value = key
-    console.log(key)
+tabsKey.value = key
+console.log(key)
 })
 
-onMounted(() => {
-    setContextMenu()
-})
 
-//左侧菜单
-const menuKey = ref('1')
-const menuOptions = ref([
-    {key: '1', label: '合同洽谈', badge: 0},
-    {key: '2', label: '合同洽谈', badge: 0},
-    {key: '3', label: '合同洽谈', badge: 0},
-    {key: '4', label: '合同洽谈', badge: 0},
-    {key: '5', label: '合同洽谈', badge: 0},
-]);
+const tableData=ref([
 
-const menuChange = (item) => {
-    console.log(item)
-    menuKey.value = item?.key
-}
-const menusProps = ref({
-    key: 'key',
-    label: 'label'
-})
+{time:'二月',market:'2000',precost:1000,realcost:2000},
+{time:'三月',beginremain:'2000'},
+{time:'四月',beginremain:'2000'},
+{time:'五月',beginremain:'2000'},
+{time:'六月',beginremain:'2000'},  
+{time:'七月',beginremain:'2000'},
+{time:'八月',beginremain:'2000'},
+{time:'九月',beginremain:'2000'},
+{time:'十月',beginremain:'2000'},
+{time:'十一月',beginremain:'2000'},
+{time:'十二月',beginremain:'2000'},
 
-//菜单的右键菜单
-const contextMenu = ref([])
-const setContextMenu = () => {
-    let newArr = [];
-    newArr.push({icon: 'draft', label: '编辑分类', key: "edit"})
-    newArr.push({icon: 'delete-bin', label: '删除分类', key: "del"})
 
-    contextMenu.value = newArr
-}
-
-//菜单的右键菜单被点击
-const contextMenuClick = ({key, item}) => {
-    if (key === 'edit') {
-        openpriceEdit(2)
-        menuKey.value = item?.key
-    } else if (key === 'del') {
-        window?.$messageBox?.alert('您确定要删除该预算分类信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
-            showCancelButton: true,
-            confirmButtonText: '确认注销',
-            cancelButtonText: '取消',
-            type: 'warning',
-            callback: (action) => {
-                if (action === 'confirm') {
-                    console.log(11111);
-                }
-            }
-        })
-    }
-}
-
-const priceTitle = ref('')
-const priceModal = ref(false)
-const openpriceEdit = (type) => {
-    if (type === 1) {
-        priceTitle.value = '新增分类'
-    } else {
-        priceTitle.value = '编辑分类'
-    }
-
-    priceModal.value = true
-}
-
-const priceform = ref({})
-const priceModalClose = () => {
-    priceModal.value = false
-}
 
-const taskTitle = ref('')
-const openEdit = (type) => {
-    if (type === 1) {
-        taskTitle.value = '新增'
-    } else {
-        taskTitle.value = '编辑'
-    }
-
-    editTaskModal.value = true
-}
-
-
-const editTaskModal = ref(false)
-const testModalClose = () => {
-    editTaskModal.value = false
-}
+])
+const tableColData=ref([
+  {
+    id:'time',
+    name: '时间',
+    children:[
+    {
+        id:'time',
+        name: '时间',
+        children:[]
+    },
+    ]
+  },
+  
+ {
+        id: 'peopleCost',
+        name: '人工成本',
+        children:[
+            {
+            id: 'precost',
+            name: '预算支出'
+            },
+            {
+            id: 'realcost',
+            name: '实际支出'
+            },
+    
+        ]
+    },
+    {
+        id: 'manngercost',
+        name: '管理成本',
+        children:[
+            {
+            id: 'precost',
+            name: '预算支出'
+            },
+            {
+            id: 'realcost',
+            name: '实际支出'
+            },
+    
+        ]
+    },
 
-const delTask = () => {
-    window?.$messageBox?.alert('您确定要删除该预算科目吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
-        showCancelButton: true,
-        confirmButtonText: '确认注销',
-        cancelButtonText: '取消',
-        type: 'warning',
-        callback: (action) => {
-            if (action === 'confirm') {
-                console.log(11111);
-            }
-        }
-    })
+    
+])
+//合并
+
+const headerStyle=({ row, column, rowIndex, columnIndex })=>{
+    const comStyle = { backgroundColor: "" };
+      // 1.1 让第0行的第0列跨2行
+      if (rowIndex === 0 && columnIndex === 0) {
+        nextTick(() => {
+          document
+            .getElementsByClassName(column.id)[0]
+            .setAttribute("rowSpan", 2);
+          return comStyle;
+        });
+      }
+      // 1.2 被覆盖的进行隐藏
+      if (rowIndex === 1 && (columnIndex == 0  )) {
+        return {
+          display: "none",
+          ...comStyle,
+        };
+      }
+
+      return comStyle;
 }
 
-const tableColumn = [
-    {key: 'name', name: '预算二级科目',align:'center'},
-    // {key: 'text', name: '任务内容'},
-    // {key: 'color', name: '完成指标'},
-    {key: 'action', name: '操作', width: 200}
-]
-const tableData = ref([
-    {name: '名称1', text: '文本1', color: 'red'},
-    {name: '名称2', text: '文本2', color: 'blue'},
-    {name: '名称3', text: '文本3', color: '无'}
-])
 
-const formLabelAlign = ref({
-    name: '',
-    region: '',
-    type: '',
-})
 
-const searchForm = ref({
-    postType: '', name: '',
-    current: 1, size: 20, total: 0
-})
-//分页被点击
-const pageChange = ({current, size}) => {
-    searchForm.value.current = current
-    searchForm.value.size = size
-}
 </script>
 
-<style lang="scss">
-.hc-page-layout-box.system-parameter {
-    display: flex;
-    position: relative;
-    // height: calc(100vh - 228px);
-    .hc-layout-left-box.menu {
-        width: 100%;
-        height: 100%;
-        position: relative;
-        background: inherit;
-        margin-right: auto;
-        border-radius: 0;
-        box-shadow: none;
-        .hc-menu-contents-box {
-            position: relative;
-            padding: 0;
-            height: 100%;
-            // height: calc(100% - 60px);
-        }
-        .hc-menu-simple-box {
-            padding: 0;
-            .item-box {
-                box-shadow: none;
-                padding: 8px 10px;
-                border-radius: 4px;
-                background: var(--el-color-primary-light-8);
-                .label-box {
-                    color: #8c8c8c;
-                }
-                .menu-icon {
-                    margin-left: 20px;
-                    background: inherit;
-                    .menu-popover-icon {
-                        color: #8c8c8c;
-                        .hc-icon-i {
-                            font-size: 20px;
-                            line-height: initial;
-                        }
-                    }
-                }
-            }
-            .item-box.active {
-                background: var(--el-color-primary-light-5);
-                .label-box {
-                    color: white;
-                }
-                .menu-icon .menu-popover-icon {
-                    color: white;
-                }
-            }
-        }
-        .hc-menu-header-box {
-            position: relative;
-            padding: 15px 18px;
-            display: flex;
-            align-items: center;
-            border-bottom: 1px solid #E9E9E9;
-            .name {
-                flex: auto;
-                position: relative;
-            }
-        }
-    }
-    .hc-page-content-box {
-        flex: 1;
-        position: relative;
-    }
-}
+<style scoped lang="scss">
+
 </style>

src/views/static/components/tab-month.vue

@@ -1 +1,151 @@
-<template></template>
+<template>
+    <div class="bg-white p-2 table_box" >
+     
+          <el-table :data="tableData" border class="mt-4"    :header-cell-style="headerStyle">
+          <el-table-column v-for="item in tableColData"  align="center"
+          :prop="item.id"
+          :label="item.name"
+          :key="item.name"
+        
+          >
+              <el-table-column v-for="item1 in item.children" align="center"
+                  :prop="item1.id"
+                  :label="item1.name"
+                  :key="item1.name">
+                 
+              </el-table-column>
+          </el-table-column>
+      </el-table>
+
+                 
+   </div>
+</template>
+
+<script setup>
+import {ref, watch,nextTick} from "vue";
+
+const props = defineProps({
+cur: {
+  type: [String,Number],
+  default: ''
+},
+})
+
+const tabsKey = ref(props.cur)
+
+//监听
+watch(() => [
+props.cur,
+], ([key]) => {
+tabsKey.value = key
+console.log(key)
+})
+
+
+const tableData=ref([
+
+{time:'二月',beginremain:'2000'},
+{time:'三月',beginremain:'2000'},
+{time:'四月',beginremain:'2000'},
+{time:'五月',beginremain:'2000'},
+{time:'六月',beginremain:'2000'},  
+{time:'七月',beginremain:'2000'},
+{time:'八月',beginremain:'2000'},
+{time:'九月',beginremain:'2000'},
+{time:'十月',beginremain:'2000'},
+{time:'十一月',beginremain:'2000'},
+{time:'十二月',beginremain:'2000'},
+
+
+
+])
+const tableColData=ref([
+  {
+    id:'time',
+    name: '时间',
+    children:[
+        {
+            id:'time',
+            name: '时间',
+        }
+    ]
+  },
+  
+ {
+        id: 'beginremain',
+        name: '年初每月收支预算',
+        children:[
+            {
+            id: 'beginremain',
+            name: '收入'
+            },
+            {
+            id: 'beginremain',
+            name: '支出'
+            },
+    
+        ]
+    },
+    {
+        id: 'beginremain',
+        name: '每月计划收支预算',
+        children:[
+            {
+            id: 'beginremain',
+            name: '收入'
+            },
+            {
+            id: 'beginremain',
+            name: '支出'
+            },
+    
+        ]
+    },
+    {
+        id: 'beginremain',
+        name: '实际每月收支',
+        children:[
+            {
+            id: 'beginremain',
+            name: '收入'
+            },
+            {
+            id: 'beginremain',
+            name: '支出'
+            },
+    
+        ]
+    },
+    
+])
+//合并
+
+const headerStyle=({ row, column, rowIndex, columnIndex })=>{
+    const comStyle = { backgroundColor: "" };
+      // 1.1 让第0行的第0列跨2行
+      if (rowIndex === 0 && columnIndex === 0) {
+        nextTick(() => {
+          document
+            .getElementsByClassName(column.id)[0]
+            .setAttribute("rowSpan", 2);
+          return comStyle;
+        });
+      }
+      // 1.2 被覆盖的进行隐藏
+      if (rowIndex === 1 && (columnIndex == 0  )) {
+        return {
+          display: "none",
+          ...comStyle,
+        };
+      }
+
+      return comStyle;
+}
+
+
+const costcheck=ref('1')
+</script>
+
+<style scoped lang="scss">
+
+</style>