mergeTable.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <div>
  3. <el-table :data="commonData" header-row-class-name="custom-table-header" @expand-change="expandChange">
  4. <el-table-column type="expand">
  5. <template slot-scope="props">
  6. <Table :data="showData[props.row.index]" :column="column" @option="handleOption" />
  7. </template>
  8. </el-table-column>
  9. <el-table-column v-for="column in columnList" :label="column.label" :prop="column.prop"
  10. show-overflow-tooltip></el-table-column>
  11. </el-table>
  12. </div>
  13. </template>
  14. <script>
  15. import Table from "./table";
  16. export default {
  17. props: {
  18. commonData: Object,
  19. column: {//显示栏位管理数组
  20. type: Array,
  21. default: () => {
  22. return [
  23. {
  24. "key": "name",
  25. "name": "事件名称",
  26. "type": "list",
  27. "order": 0,
  28. "hidden": true
  29. },
  30. {
  31. "key": "eventNumber",
  32. "name": "相关报告数量",
  33. "type": "list",
  34. "order": 0,
  35. "hidden": true
  36. },
  37. {
  38. "key": "projectNumber",
  39. "name": "相关专题库数量",
  40. "type": "list",
  41. "order": 0,
  42. "hidden": true
  43. },
  44. {
  45. "key": "projectNumber1",
  46. "name": "事件场景",
  47. "type": "list",
  48. "order": 0,
  49. "hidden": true
  50. },
  51. {
  52. "key": "projectNumber2",
  53. "name": "事件时间",
  54. "type": "list",
  55. "order": 0,
  56. "hidden": true
  57. },
  58. {
  59. "key": "projectNumber3",
  60. "name": "描述",
  61. "type": "list",
  62. "order": 0,
  63. "hidden": true
  64. },
  65. {
  66. "key": "projectNumber4",
  67. "name": "创建人",
  68. "type": "list",
  69. "order": 0,
  70. "hidden": true
  71. },
  72. {
  73. "key": "time",
  74. "name": "创建时间",
  75. "type": "list",
  76. "order": 0,
  77. "hidden": true
  78. },
  79. ]
  80. }
  81. }
  82. },
  83. mixins: [],
  84. components: {
  85. Table
  86. },
  87. data() {
  88. return {
  89. columnList: [],
  90. tableData: [],
  91. showData: []
  92. }
  93. },
  94. watch: {
  95. },
  96. mounted() {
  97. },
  98. methods: {
  99. //操作列事件
  100. handleOption(data) {
  101. this.$emit('option', data)
  102. },
  103. //打开展开行获取数据并保存起来
  104. expandChange() {
  105. }
  106. }
  107. }
  108. </script>