tab-mannager.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <div class="bg-white p-2 table_box" >
  3. <el-table :data="tableData" border class="mt-4" :header-cell-style="headerStyle"
  4. >
  5. <el-table-column v-for="item in tableColData" align="center"
  6. :prop="item.id"
  7. :label="item.name"
  8. :key="item.name"
  9. >
  10. <el-table-column v-for="item1 in item.children" align="center"
  11. :prop="item1.id"
  12. :label="item1.name"
  13. :key="item1.name">
  14. </el-table-column>
  15. </el-table-column>
  16. </el-table>
  17. </div>
  18. </template>
  19. <script setup>
  20. import {ref, watch,nextTick} from "vue";
  21. const props = defineProps({
  22. cur: {
  23. type: [String,Number],
  24. default: ''
  25. },
  26. })
  27. const tabsKey = ref(props.cur)
  28. //监听
  29. watch(() => [
  30. props.cur,
  31. ], ([key]) => {
  32. tabsKey.value = key
  33. console.log(key)
  34. })
  35. const tableData=ref([
  36. {time:'二月',market:'2000',precost:1000,realcost:2000},
  37. {time:'三月',beginremain:'2000'},
  38. {time:'四月',beginremain:'2000'},
  39. {time:'五月',beginremain:'2000'},
  40. {time:'六月',beginremain:'2000'},
  41. {time:'七月',beginremain:'2000'},
  42. {time:'八月',beginremain:'2000'},
  43. {time:'九月',beginremain:'2000'},
  44. {time:'十月',beginremain:'2000'},
  45. {time:'十一月',beginremain:'2000'},
  46. {time:'十二月',beginremain:'2000'},
  47. ])
  48. const tableColData=ref([
  49. {
  50. id:'time',
  51. name: '时间',
  52. children:[
  53. {
  54. id:'time',
  55. name: '时间',
  56. children:[]
  57. },
  58. ]
  59. },
  60. {
  61. id: 'peopleCost',
  62. name: '人工成本',
  63. children:[
  64. {
  65. id: 'precost',
  66. name: '预算支出'
  67. },
  68. {
  69. id: 'realcost',
  70. name: '实际支出'
  71. },
  72. ]
  73. },
  74. {
  75. id: 'manngercost',
  76. name: '管理成本',
  77. children:[
  78. {
  79. id: 'precost',
  80. name: '预算支出'
  81. },
  82. {
  83. id: 'realcost',
  84. name: '实际支出'
  85. },
  86. ]
  87. },
  88. ])
  89. //合并
  90. const headerStyle=({ row, column, rowIndex, columnIndex })=>{
  91. const comStyle = { backgroundColor: "" };
  92. // 1.1 让第0行的第0列跨2行
  93. if (rowIndex === 0 && columnIndex === 0) {
  94. nextTick(() => {
  95. document
  96. .getElementsByClassName(column.id)[0]
  97. .setAttribute("rowSpan", 2);
  98. return comStyle;
  99. });
  100. }
  101. // 1.2 被覆盖的进行隐藏
  102. if (rowIndex === 1 && (columnIndex == 0 )) {
  103. return {
  104. display: "none",
  105. ...comStyle,
  106. };
  107. }
  108. return comStyle;
  109. }
  110. </script>
  111. <style scoped lang="scss">
  112. </style>