修改bug

src/views/OperationalOverview/components/baseTable.vue

@@ -0,0 +1,187 @@
+<!--
+ * @Date: 2020-12-14 09:07:03
+ * @LastEditors: zhp
+ * @LastEditTime: 2023-11-14 10:11:09
+ * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
+ * @Description:
+-->
+<template>
+  <div class="visual-base-table-container">
+    <el-table
+      v-loading="isLoading"
+      :header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff'}"
+      :row-style="setRowStyle"
+      :data="renderData"
+      border
+      style="width: 100%; background: transparent"
+    >
+      <el-table-column
+        v-if="page && limit && showIndex"
+        prop="_pageIndex"
+        :label="'tableHeader.index' | i18nFilter"
+        :width="70"
+        align="center"
+      />
+      <el-table-column
+        v-for="item in renderTableHeadList"
+        :key="item.prop"
+        :show-overflow-tooltip="showOverflow"
+        v-bind="item"
+      >
+        <template slot-scope="scope">
+
+          <component
+            :is="item.subcomponent"
+            v-if="item.subcomponent"
+            :inject-data="{...scope.row, ...item}"
+            @emitData="emitData"
+          />
+          <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
+
+        </template>
+      </el-table-column>
+      <slot name="content" />
+    </el-table>
+  </div>
+</template>
+<script>
+import { isObject, isString } from 'lodash'
+export default {
+  name: 'BaseTable',
+  filters: {
+    commonFilter: (source, filterType = a => a) => {
+      return filterType(source)
+    }
+  },
+  props: {
+    tableData: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isObject(item)).length === 0
+    },
+    tableConfig: {
+      type: Array,
+      required: true,
+      validator: val => val.filter(item => !isString(item.prop) || !isString(item.label)).length === 0
+    },
+    isLoading: {
+      type: Boolean,
+      required: false
+    },
+    page: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      required: false,
+      default: 5
+    },
+    beilv: {
+      type: Number,
+      default: 1
+    },
+    showOverflow: {
+      type: Boolean,
+      default: true
+    },
+    showIndex: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      tableConfigBak: [],
+      selectedBox: new Array(100).fill(true)
+    }
+  },
+  computed: {
+    renderData() {
+      if (this.tableData.length && !this.tableData[0]._pageIndex) {
+        this.tableData.forEach((item, index) => {
+          item._pageIndex = (this.page - 1) * this.limit + index + 1
+        })
+      }
+      return this.tableData.slice((this.page - 1) * this.limit, this.page * this.limit)
+    },
+    renderTableHeadList() {
+      return this.tableConfig.filter((item, index) => {
+        return this.selectedBox[index]
+      })
+    }
+  },
+  beforeMount() {
+    this.selectedBox = new Array(100).fill(true)
+  },
+  methods: {
+    emitData(val) {
+      this.$emit('emitFun', val)
+    },
+    setRowStyle(v) {
+      if (v.rowIndex % 2 === 0) {
+        return {
+          background: 'rgba(14, 32, 62, 1)',
+          color: 'rgba(255,255,255,0.5)',
+          height: 26  + 'px',
+          lineHeight: 26 + 'px',
+          padding: 0,
+          fontSize: 12  + 'px'
+        }
+      } else {
+        return {
+          background: 'rgba(32, 55, 96, 1)',
+          color: 'rgba(255,255,255,0.5)',
+          height: 26  + 'px',
+          lineHeight: 26  + 'px',
+          padding: 0,
+          fontSize: 12  + 'px'
+        }
+      }
+    },
+    setCellStyle() {
+      return {
+        // lineHeight: 23  + 'px'
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+@import "../styles/index.scss";
+.visual-base-table-container {
+  .el-table {
+    border: 0;
+  }
+  .el-table::before,.el-table--border::after {
+    background-color: transparent;
+  }
+  .el-table th,td{
+    border-color: #0D1728 !important;
+    padding: 0;
+  }
+  .el-table tr {
+    background: transparent;
+  }
+  .el-table__row:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+    }
+
+  .el-table__row--striped:hover > td {
+    background-color: rgba(79,114,136,0.29) !important;
+  }
+}
+// .setting {
+//   text-align: right;
+//   padding: 15px;
+//   .setting-box {
+//     width: 100px;
+//   }
+//   i {
+//     color: #aaa;
+//     @extend .pointer;
+//   }
+// }
+
+</style>