sctable 数据格式错误bug

src/components/scTable/index.vue

@@ -8,43 +8,18 @@
 -->
 
 <template>
-  <div
-    class="scTable"
-    :style="{ height: _height }"
-    ref="scTableMain"
-    v-loading="loading"
-  >
+  <div class="scTable" :style="{ height: _height }" ref="scTableMain" v-loading="loading">
     <div class="scTable-table" :style="{ height: _table_height }">
-      <el-table
-        v-bind="$attrs"
-        :data="tableData"
-        :row-key="rowKey"
-        :key="toggleIndex"
-        ref="scTable"
-        :height="height == 'auto' ? null : '100%'"
-        :size="config.size"
-        :border="config.border"
-        :stripe="config.stripe"
-        :summary-method="remoteSummary ? remoteSummaryMethod : summaryMethod"
-        @sort-change="sortChange"
-        @filter-change="filterChange"
-      >
+      <el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable"
+        :height="height == 'auto' ? null : '100%'" :size="config.size" :border="config.border" :stripe="config.stripe"
+        :summary-method="remoteSummary ? remoteSummaryMethod : summaryMethod" @sort-change="sortChange"
+        @filter-change="filterChange">
         <slot></slot>
         <template v-for="(item, index) in userColumn" :key="index">
-          <el-table-column
-            v-if="!item.hide"
-            :column-key="item.prop"
-            :label="item.label"
-            :prop="item.prop"
-            :width="item.width"
-            :sortable="item.sortable"
-            :fixed="item.fixed"
-            :filters="item.filters"
-            :filter-method="
+          <el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop"
+            :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="
               remoteFilter || !item.filters ? null : filterHandler
-            "
-            :show-overflow-tooltip="item.showOverflowTooltip"
-          >
+            " :show-overflow-tooltip="item.showOverflowTooltip">
             <template #default="scope">
               <slot :name="item.prop" v-bind="scope">
                 {{ scope.row[item.prop] }}
@@ -60,92 +35,37 @@
     </div>
     <div class="scTable-page" v-if="!hidePagination || !hideDo">
       <div class="scTable-pagination">
-        <el-pagination
-          v-if="!hidePagination"
-          background
-          :small="true"
-          :layout="paginationLayout"
-          :total="total"
-          :page-size="scPageSize"
-          :page-sizes="pageSizes"
-          v-model:currentPage="currentPage"
-          @current-change="paginationChange"
-          @update:page-size="pageSizeChange"
-        ></el-pagination>
+        <el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total"
+          :page-size="scPageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage"
+          @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
       </div>
       <div class="scTable-do" v-if="!hideDo">
-        <el-button
-          v-if="!hideRefresh"
-          @click="refresh"
-          icon="el-icon-refresh"
-          circle
-          style="margin-left: 15px"
-        ></el-button>
-        <el-button
-          v-if="!hideRefresh"
-          @click="reload"
-          icon="el-icon-refresh-right"
-          circle
-          style="margin-left: 15px"
-        ></el-button>
-        <el-popover
-          v-if="column"
-          placement="top"
-          title="列设置"
-          :width="500"
-          trigger="click"
-          :hide-after="0"
-          @show="customColumnShow = true"
-          @after-leave="customColumnShow = false"
-        >
+        <el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left: 15px">
+        </el-button>
+        <el-button v-if="!hideRefresh" @click="reload" icon="el-icon-refresh-right" circle style="margin-left: 15px">
+        </el-button>
+        <el-popover v-if="column" placement="top" title="列设置" :width="500" trigger="click" :hide-after="0"
+          @show="customColumnShow = true" @after-leave="customColumnShow = false">
           <template #reference>
-            <el-button
-              icon="el-icon-set-up"
-              circle
-              style="margin-left: 15px"
-            ></el-button>
+            <el-button icon="el-icon-set-up" circle style="margin-left: 15px"></el-button>
           </template>
-          <columnSetting
-            v-if="customColumnShow"
-            ref="columnSetting"
-            @userChange="columnSettingChange"
-            @save="columnSettingSave"
-            @back="columnSettingBack"
-            :column="userColumn"
-          ></columnSetting>
+          <columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange"
+            @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
         </el-popover>
-        <el-popover
-          v-if="!hideSetting"
-          placement="top"
-          title="表格设置"
-          :width="400"
-          trigger="click"
-          :hide-after="0"
-        >
+        <el-popover v-if="!hideSetting" placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0">
           <template #reference>
-            <el-button
-              icon="el-icon-setting"
-              circle
-              style="margin-left: 15px"
-            ></el-button>
+            <el-button icon="el-icon-setting" circle style="margin-left: 15px"></el-button>
           </template>
           <el-form label-width="80px" label-position="left">
             <el-form-item label="表格尺寸">
-              <el-radio-group
-                v-model="config.size"
-                size="small"
-                @change="configSizeChange"
-              >
+              <el-radio-group v-model="config.size" size="small" @change="configSizeChange">
                 <el-radio-button label="large">大</el-radio-button>
                 <el-radio-button label="default">正常</el-radio-button>
                 <el-radio-button label="small">小</el-radio-button>
               </el-radio-group>
             </el-form-item>
             <el-form-item label="样式">
-              <el-checkbox
-                v-model="config.border"
-                label="纵向边框"
-              ></el-checkbox>
+              <el-checkbox v-model="config.border" label="纵向边框"></el-checkbox>
               <el-checkbox v-model="config.stripe" label="斑马纹"></el-checkbox>
             </el-form-item>
           </el-form>
@@ -166,9 +86,9 @@ export default {
   },
   props: {
     tableName: { type: String, default: "" },
-    apiObj: { type: Object, default: () => {} },
+    apiObj: { type: Object, default: () => { } },
     params: { type: Object, default: () => ({}) },
-    data: { type: Object, default: () => {} },
+    data: { type: Object, default: () => { } },
     height: { type: [String, Number], default: "100%" },
     size: { type: String, default: "default" },
     border: { type: Boolean, default: false },
@@ -182,7 +102,7 @@ export default {
     parseData: { type: Function, default: config.parseData },
     rowKey: { type: String, default: "" },
     summaryMethod: { type: Function, default: null },
-    column: { type: Object, default: () => {} },
+    column: { type: Object, default: () => { } },
     remoteSort: { type: Boolean, default: false },
     remoteFilter: { type: Boolean, default: false },
     remoteSummary: { type: Boolean, default: false },
@@ -287,34 +207,36 @@ export default {
       }
       Object.assign(reqData, this.tableParams);
       try {
-        var res = await this.apiObj.req(reqData);
-        var response = this.parseData(res);
-        if (response.total === 0) {
-          this.emptyText = "暂无数据";
+        if (this.apiObj) {
+          var res = await this.apiObj.req(reqData);
+          var response = this.parseData(res);
+          if (response.total === 0) {
+            this.emptyText = "暂无数据";
+          }
+          let dataList = null;
+          if (this.hidePagination) {
+            dataList = response.data || [];
+          } else {
+            dataList = response.rows;
+          }
+          if (this.isTree) {
+            this.tableData = this.redata(dataList);
+          } else {
+            this.tableData = dataList || [];
+          }
+          this.total = response.total || 0;
+          this.summary = response.summary || {};
+          this.loading = false;
+          // if(!this.hidePagination){
+          //   this.$refs.scTable.setScrollTop(0);
+          // }
+          this.$emit("dataChange", res, this.tableData);
         }
-        let dataList = null;
-        if (this.hidePagination) {
-          dataList = response.data || [];
-        } else {
-          dataList = response.rows;
-        }
-        if (this.isTree) {
-          this.tableData = this.redata(dataList);
-        } else {
-          this.tableData = dataList || [];
-        }
-        this.total = response.total || 0;
-        this.summary = response.summary || {};
-        this.loading = false;
-        // if(!this.hidePagination){
-        //   this.$refs.scTable.setScrollTop(0);
-        // }
-        this.$emit("dataChange", res, this.tableData);
       } catch (error) {
         this.loading = false;
-        if(error.response && error.response.data){
+        if (error.response && error.response.data) {
           this.emptyText = error.response.data.err_msg;
-        }else{
+        } else {
           this.emptyText = error.statusText || "数据格式错误";
         }
         return false;
@@ -550,11 +472,12 @@ export default {
 </script>
 
 <style scoped>
-.scTable {
-}
+.scTable {}
+
 .scTable-table {
   height: calc(100% - 50px);
 }
+
 .scTable-page {
   height: 50px;
   display: flex;
@@ -562,16 +485,20 @@ export default {
   justify-content: space-between;
   padding: 0 15px;
 }
+
 .scTable-do {
   white-space: nowrap;
 }
+
 .scTable:deep(.el-table__footer) .cell {
   font-weight: bold;
 }
+
 .scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-horizontal {
   height: 12px;
   border-radius: 12px;
 }
+
 .scTable:deep(.el-table__body-wrapper) .el-scrollbar__bar.is-vertical {
   width: 12px;
   border-radius: 12px;

src/views/ecm/event.vue

@@ -60,6 +60,7 @@
               v-for="item in scope.row.cates_"
               :key="item.id"
               type="warning"
+              effect="plain"
               >{{ item.name }}</el-tag
             >
           </template>
@@ -92,14 +93,14 @@
         <!-- <el-table-column label="处理时间" prop="handle_time"></el-table-column> -->
         <el-table-column label="事件标记" prop="mark">
           <template #default="scope">
-            <el-span v-if="scope.row.mark == 20" color="red">误报</el-span>
-            <el-span v-else color="green">正常</el-span>
+            <el-tag v-if="scope.row.mark == 20" type="warning" effect="plain">误报</el-tag>
+            <el-tag v-else type="success" effect="plain">正常</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="处理超时">
           <template #default="scope">
             <el-tag v-if="scope.row.is_timeout" type="warning">是</el-tag>
-            <el-tag v-else type="success">否</el-tag>
+            <el-tag v-else type="success" effect="plain">否</el-tag>
           </template>
         </el-table-column>