统一表格样式

src/assets/less/common.less

@@ -56,6 +56,7 @@ body,
 }
 // iview表格全局自定义样式
 .ivu-table {
+  color: #798CB5;
   background-color: #ffffff66;
   .ivu-table-header,
   .ivu-table-fixed-header {
@@ -63,6 +64,7 @@ body,
       background-color: #e9f0ff;
       th {
         padding: 12px 0;
+        color: #253A70;
         line-height: 1;
         background-color: #e9f0ff;
       }
@@ -72,10 +74,17 @@ body,
   .ivu-table-fixed-right .ivu-table-tbody tr,
   .ivu-table-body .ivu-table-tbody tr {
     &.ivu-table-row-hover {
+      color: #253A70;
       background-color: #ffffff;
       box-shadow: 6px 1px 9px 0 #0879cd24;
       td {
         background-color: #ffffff;
+        .action_list {
+          color: #339DFF;
+          .action_del {
+            color: #F0153F;
+          }
+        }
       }
     }
     td {
@@ -346,4 +355,22 @@ fieldset[disabled] .ivu-input,
   border-radius: 15px;
   border: 1px solid #e9f0f9;
   background-color: #fff;
+}
+.table_wrap {
+  margin: 0 16px;
+  border: 1px solid #e8eaec;
+  border-bottom: none;
+  .action_list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    > div {
+      margin: 0 4px;
+      padding: 0 4px;
+    }
+  }
+}
+.page_wrap {
+  padding: 16px;
+  text-align: right;
 }

src/views/platformSection/regionManage/regionManage.vue

@@ -4,16 +4,43 @@
       <Input
         v-model="searchForm.name"
         placeholder="请输入区域名称"
+        search
+        @on-search="searchList()"
         style="width: 150px"
       />
       <Button type="primary" class="primary_btn">新建</Button>
     </div>
-    <Table :columns="columns" :data="searchForm.list">
-      <template slot-scope="{ row }" slot="updatetimeSlot">
-        <div>{{ date_format(row.updatetime) }}</div>
-      </template>
-    </Table>
-    <Page :total="100" show-sizer />
+    <div class="table_wrap">
+      <Table :columns="columns" :data="searchForm.list">
+        <template slot-scope="{ row }" slot="createtimeSlot">
+          <div>{{ date_format(row.createtime) }}</div>
+        </template>
+        <template slot-scope="{ row }" slot="updatetimeSlot">
+          <div>{{ date_format(row.updatetime) }}</div>
+        </template>
+        <template slot-scope="{ row }" slot="actionSlot">
+          <div class="action_list">
+            <div @click="toEnter(row)">进入</div>
+            <div @click="toView(row)">查看</div>
+            <div @click="toEdit(row)">编辑</div>
+            <div class="action_del" @click="toDel(row)">删除</div>
+          </div>
+        </template>
+      </Table>
+    </div>
+    <div class="page_wrap">
+      <Page
+        :transfer="true"
+        :total="searchForm.total"
+        :current="searchForm.page"
+        :page-size="searchForm.size"
+        :page-size-opts="[10, 20, 40, 60]"
+        @on-change="pageChange"
+        @on-page-size-change="pageSizeChange"
+        show-total
+        show-sizer
+      ></Page>
+    </div>
   </div>
 </template>
 
@@ -46,7 +73,7 @@ export default {
         },
         {
           title: "区域名称",
-          key: "dbname",
+          key: "areaname",
           align: "center"
         },
         {
@@ -75,14 +102,64 @@ export default {
         },
         {
           title: "操作",
-          slot: "action",
-          width: 80,
+          slot: "actionSlot",
+          width: 220,
           align: "center"
         }
       ]
     };
   },
-  methods: {}
+  created() {
+    this.searchList();
+  },
+  methods: {
+    searchList() {
+      this.searchForm.page = 1;
+      this.getList();
+    },
+    pageChange(page) {
+      this.searchForm.page = page;
+      this.getList();
+    },
+    pageSizeChange(size) {
+      this.searchForm.size = size;
+      this.searchForm.page = 1;
+      this.getList();
+    },
+    getList() {
+      this.searchForm.list = [
+        {
+          id: 1,
+          areaname: "区域一",
+          createname: "区域一",
+          createtime: 1710838418,
+          updatename: "区域一",
+          updatetime: 1710838430
+        },
+        {
+          id: 2,
+          areaname: "区域二",
+          createname: "区域一",
+          createtime: 1710838418,
+          updatename: "区域一",
+          updatetime: 1710838430
+        },
+        {
+          id: 3,
+          areaname: "区域三",
+          createname: "区域一",
+          createtime: 1710838418,
+          updatename: "区域一",
+          updatetime: 1710838430
+        }
+      ];
+      this.searchForm.total = 3;
+    },
+    toEnter() {},
+    toView() {},
+    toEdit() {},
+    toDel() {}
+  }
 };
 </script>