adm-multi-table.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <div>
  3. <el-table
  4. :data="tableData"
  5. style="width: 100%"
  6. max-height="550"
  7. class="adm-multi-table"
  8. :row-style="{ height: '10px' }"
  9. border
  10. v-if="tableData.length > 0"
  11. >
  12. <el-table-column
  13. prop="date"
  14. label="编辑"
  15. width="80"
  16. align="center"
  17. fixed
  18. >
  19. <template slot-scope="scope">
  20. <span
  21. class="el-icon-edit el-input__icon"
  22. style="cursor: pointer"
  23. @click="handleEdit(scope.$index, scope.row)">
  24. </span>
  25. </template>
  26. </el-table-column>
  27. <el-table-column
  28. v-for="item in headersStage"
  29. :key="item.name"
  30. :label="item.name"
  31. align="center"
  32. >
  33. <el-table-column
  34. v-for="(child,index) in item.data"
  35. :key="index"
  36. :label="child.name"
  37. :prop="child.path"
  38. align="center"
  39. show-overflow-tooltip
  40. >
  41. </el-table-column>
  42. </el-table-column>
  43. </el-table>
  44. <div v-else class="center"> 暂无数据</div>
  45. </div>
  46. </template>
  47. <script lang="ts">
  48. import { Component, Prop, Vue } from "vue-property-decorator";
  49. @Component({
  50. name: 'adm-multi-table'
  51. })
  52. export default class extends Vue {
  53. // 表格数据
  54. @Prop({ default: Array }) tableData ?: []
  55. // 表头数据
  56. @Prop({ default: Object }) headersStage ?: {}
  57. // 当前页头文字
  58. @Prop({ default: '' }) currentHeader ?: string
  59. handleEdit(index, row) {
  60. console.log(index, row)
  61. }
  62. }
  63. </script>
  64. <style lang="scss">
  65. .adm-multi-table {
  66. .el-table__row {
  67. td {
  68. padding: 0;
  69. }
  70. }
  71. }
  72. .center {
  73. display: flex;
  74. justify-content: center;
  75. align-content: center;
  76. margin-top: 200px;
  77. }
  78. </style>