优化表格

src/views/govern/setting/frontManagement/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="default-main">
         <div class="default">
-            <div style="flex: 1">
+            <div style="width: calc(100% - 300px);">
                 <TableHeader>
                     <template v-slot:select>
                         <el-form-item label="前置等级">
@@ -39,7 +39,7 @@
                     @current-change="currentChangeEvent"
                 ></Table>
             </div>
-            <div class="pd10" style="width: 400px" v-loading="loading">
+            <div class="pd10" style="width: 300px" v-loading="loading">
                 <el-input v-model="filterText" placeholder="请输入内容" clearable show-word-limit @input="change">
                     <template #prefix>
                         <Icon name="el-icon-Search" style="font-size: 16px" />
@@ -301,12 +301,21 @@ const tableStore = new TableStore({
     url: '/cs-device-boot/node/nodeList',
     method: 'POST',
     column: [
-        { title: '名称', field: 'name' },
-        { title: 'IP', field: 'ip' },
+        {
+            field: 'index',
+            title: '序号',
+            width: '80',
+            formatter: (row: any) => {
+                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
+            }
+        },
+        { title: '名称', field: 'name', minWidth: '110' },
+        { title: 'IP', field: 'ip', minWidth: '110' },
         {
             title: '等级',
             field: 'nodeGrade',
             render: 'tag',
+            minWidth: '80',
             custom: {
                 0: 'success',
                 1: 'warning',
@@ -320,20 +329,24 @@ const tableStore = new TableStore({
         },
         {
             title: '最大监测点数量',
-            field: 'nodeDevNum'
+            field: 'nodeDevNum',
+             minWidth: '80',
         },
         {
             title: '最大进程数',
-            field: 'maxProcessNum'
+            field: 'maxProcessNum',
+               minWidth: '80',
         },
         {
             title: '排序',
-            field: 'sort'
+            field: 'sort',
+            minWidth: '80'
         },
         {
             title: '状态',
             field: 'state',
             render: 'tag',
+            minWidth: '80',
             custom: {
                 0: 'warning',
                 1: 'success'
@@ -343,11 +356,12 @@ const tableStore = new TableStore({
                 1: '启用'
             }
         },
-        { title: '描述', field: 'remark' },
+        { title: '描述', field: 'remark', minWidth: '200', },
         {
             title: '操作',
+            fixed: 'right',
             align: 'center',
-            width: '180',
+            width: '100',
             render: 'buttons',
             buttons: [
                 {
@@ -626,7 +640,7 @@ onMounted(() => {
         height: 140px;
     }
 }
-:deep(.default) {
+.default {
     display: flex;
 }
 .custom-tree-node {