优化列表

src/components/GenericMonitorList.vue

@@ -5,53 +5,53 @@
         <el-form-item v-for="col in filterableColumns" :key="col.dataIndex" :label="col.title">
           <template v-if="col.filterType === 'text'">
             <el-input
-              v-model="filters[col.dataIndex]"
-              :placeholder="`搜索 ${col.title}`"
-              clearable
-              @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+                v-model="filters[col.dataIndex]"
+                :placeholder="`搜索 ${col.title}`"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
             ></el-input>
           </template>
           <template v-else-if="col.filterType === 'number'">
             <el-input-number
-              v-model="filters[col.dataIndex]"
-              :placeholder="`搜索 ${col.title}`"
-              :controls="false"
-              clearable
-              @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+                v-model="filters[col.dataIndex]"
+                :placeholder="`搜索 ${col.title}`"
+                :controls="false"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
             ></el-input-number>
           </template>
           <template v-else-if="col.filterType === 'dateRange'">
             <el-date-picker
-              v-model="filters[col.dataIndex]"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+                v-model="filters[col.dataIndex]"
+                type="datetimerange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
             ></el-date-picker>
           </template>
           <template v-else-if="col.filterType === 'select'">
             <el-select
-              v-model="filters[col.dataIndex]"
-              :placeholder="`选择 ${col.title}`"
-              clearable
-              @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+                v-model="filters[col.dataIndex]"
+                :placeholder="`选择 ${col.title}`"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
             >
               <el-option
-                v-for="option in col.filterOptions"
-                :key="option.value"
-                :label="option.text"
-                :value="option.value"
+                  v-for="option in col.filterOptions"
+                  :key="option.value"
+                  :label="option.text"
+                  :value="option.value"
               ></el-option>
             </el-select>
           </template>
           <template v-else-if="col.filterType === 'boolean'">
             <el-select
-              v-model="filters[col.dataIndex]"
-              :placeholder="`选择 ${col.title}`"
-              clearable
-              @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
+                v-model="filters[col.dataIndex]"
+                :placeholder="`选择 ${col.title}`"
+                clearable
+                @change="handleFilterChange(col.dataIndex, filters[col.dataIndex])"
             >
               <el-option label="是" :value="true"></el-option>
               <el-option label="否" :value="false"></el-option>
@@ -65,44 +65,46 @@
       </el-form>
 
       <el-table
-        :data="data"
-        v-loading="loading"
-        border
-        style="width: 100%"
-        @sort-change="handleSortChange"
+          :data="data"
+          v-loading="loading"
+          border
+          stripe
+          style="width: 100%"
+          @sort-change="handleSortChange"
       >
         <el-table-column
-          v-for="col in tableColumns"
-          :key="col.key"
-          :prop="col.prop"
-          :label="col.title"
-          :sortable="col.sorter ? 'custom' : false"
-          :formatter="col.formatter"
+            v-for="col in tableColumns"
+            :key="col.key"
+            :prop="col.prop"
+            :label="col.title"
+            :sortable="col.sorter ? 'custom' : false"
+            :formatter="col.formatter"
+            :min-width="col.minWidth"
         >
           <template v-if="col.render" #default="{ row }">
-            <component :is="col.render(row)" />
+            <component :is="col.render(row)"/>
           </template>
         </el-table-column>
       </el-table>
 
       <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="pagination.currentPage"
-        :page-sizes="[10, 20, 50, 100]"
-        :page-size="pagination.pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="pagination.total"
-        background
-        style="margin-top: 20px; text-align: right;"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pagination.currentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pagination.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pagination.total"
+          background
+          style="margin-top: 20px; text-align: right;"
       ></el-pagination>
     </el-card>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, watch, computed } from 'vue';
-import { ElMessage } from 'element-plus';
+import {ref, reactive, onMounted, watch, computed} from 'vue';
+import {ElMessage} from 'element-plus';
 
 const props = defineProps({
   fetchData: {
@@ -134,7 +136,7 @@ const filterableColumns = computed(() => {
 
 const tableColumns = computed(() => {
   return props.columnsConfig.map(col => {
-    const newCol = { ...col };
+    const newCol = {...col};
     newCol.prop = Array.isArray(col.dataIndex) ? col.dataIndex.join('.') : col.dataIndex;
     return newCol;
   });
@@ -182,7 +184,7 @@ const handleCurrentChange = (val) => {
   loadData();
 };
 
-const handleSortChange = ({ prop, order }) => {
+const handleSortChange = ({prop, order}) => {
   sortOrder.prop = prop;
   sortOrder.order = order;
   loadData();
@@ -213,10 +215,12 @@ onMounted(() => {
 .generic-monitor-list {
   padding: 20px;
 }
+
 .filter-form {
   margin-bottom: 20px;
 }
+
 .el-card {
-    border: none;
+  border: none;
 }
 </style>