adm-multi-table.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  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. :formatter="formatContent"
  25. align="center"
  26. >
  27. </el-table-column>
  28. </el-table-column>
  29. </el-table>
  30. <div v-else class="center">暂无数据</div>
  31. </div>
  32. </template>
  33. <script lang="ts">
  34. import { ElTable } from "element-ui/types/table";
  35. import { Component, Emit, Prop, Ref, Vue, Watch } from "vue-property-decorator";
  36. @Component({
  37. name: "adm-multi-table",
  38. })
  39. export default class extends Vue {
  40. @Ref("tableDom") readonly tableDom!: ElTable;
  41. // 表格数据
  42. @Prop({ default: Array }) tableData?: [];
  43. // 表头数据
  44. @Prop({ default: Object }) headersStage?: any;
  45. // 当前页头文字
  46. @Prop({ default: "" }) currentHeader?: string;
  47. @Emit("handleCurrentEdit")
  48. handleEdit(index: number, row: any) {
  49. return row;
  50. }
  51. get haderInfoMap() {
  52. if (this.headersStage?.dictStages?.data?.length) {
  53. const haderInfoMap: any = {};
  54. this.headersStage.dictStages.data.forEach((item: any) => {
  55. haderInfoMap[item.path] = item;
  56. });
  57. console.log(haderInfoMap);
  58. return haderInfoMap;
  59. } else {
  60. return {};
  61. }
  62. }
  63. /**
  64. * 表格特殊内容格式化处理
  65. */
  66. private formatContent(row: any, column: any, cellValue: any) {
  67. const info = this.haderInfoMap[column.property];
  68. if (info && cellValue) { //有值且获取到表头信息
  69. const dataSource = info?.dataSource ? info.dataSource : [];
  70. if (info.dataType === "ENUM" || info.dataType === "BOOLEAN") { //内容为单选枚举和布尔类型
  71. const text = dataSource.find((item: any) => {
  72. return item.code === cellValue;
  73. })?.name;
  74. return text;
  75. } else if (info.dataType === "MENUM" && cellValue instanceof Array && cellValue.length) { //内容为多选枚举且值为数组
  76. const textList = dataSource.map((item: any) => {
  77. if (
  78. cellValue.find((value: string) => {
  79. return item?.code === value;
  80. })
  81. ) {
  82. return item?.name;
  83. }
  84. }).filter((item: any) => item).join(",");
  85. return textList;
  86. } else {
  87. return cellValue;
  88. }
  89. }
  90. return cellValue;
  91. }
  92. @Watch("headersStage", { immediate: true, deep: true })
  93. onCurrentHeaderChange() {
  94. this.$nextTick(() => {
  95. if (this.tableDom?.doLayout) this.tableDom.doLayout();
  96. });
  97. }
  98. @Watch("tableData", { immediate: true, deep: true })
  99. handleTableData(o: any, n: any) {
  100. this.$nextTick(() => {
  101. console.log(o, n);
  102. // this.tableData = this.tableData
  103. });
  104. }
  105. }
  106. </script>
  107. <style lang="scss">
  108. .adm-multi-table {
  109. .el-table__row {
  110. td {
  111. padding: 0;
  112. }
  113. }
  114. }
  115. .center {
  116. display: flex;
  117. justify-content: center;
  118. align-content: center;
  119. margin-top: 200px;
  120. }
  121. </style>