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

<template>
    <div class="bg-white p-2 table_box" >
     
          <el-table :data="tableData" border class="mt-4"  stripe     :header-cell-style="headerStyle" :row-class-name="tableRowClassName"  style="height: 90%;"
>
          <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:'二月',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'},
{time:'总计',beginremain:'2000'},



])
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 headerStyle=({ row, column, rowIndex, columnIndex })=>{
  const comStyle = {fontSize:"16px" ,background: "rgb(214, 225, 255)",color:'black'}
      // 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  tableRowClassName=({ row, rowIndex }) =>{
      if (rowIndex ===12) {
        return 'warm-row';
      }
 }

</script>

<style scoped lang="scss">

</style>