adm-multi-table.vue 2.3 KB

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