市场模型

src/views/market/index.vue

@@ -123,7 +123,7 @@
       <el-table
         :data="models"
         style="width: 100%"
-        min-height="40vh"
+        height="100%"
       >
         <el-table-column type="selection"/>
         <el-table-column label="模型名称"></el-table-column>
@@ -143,20 +143,22 @@
         </el-table-column>
       </el-table>
     </div>
-    <el-row>
-      <el-col :span="2">
+    <div class="foot">
+      <div class="left">
         <span>已选择0项</span>
-      </el-col>
-      <el-col :span="2">
         <el-button>批量启用</el-button>
-      </el-col>
-      <el-col :span="2">
         <el-button>批量禁用</el-button>
-      </el-col>
-      <el-col :span="2">
         <el-button type="danger">批量删除</el-button>
-      </el-col>
-    </el-row>
+      </div>
+      <div class="right">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="10"
+          :page-size="pageSize"
+        />
+      </div>
+    </div>
     <el-dialog v-model="dialogVisable">
       <add-model></add-model>
     </el-dialog>
@@ -172,6 +174,7 @@ const modelNameOption = ref(["模型1","模型2"])
 const modelTypeOption = ref(["类型1","类型2"])
 const modelStateOption = ref(["全部","开启","关闭"])
 const models = ref([{}])
+const pageSize = ref(10)
 
 const modelName = ref(null)
 const modelType = ref(null)
@@ -199,12 +202,25 @@ const edit = ((index,row)=>{
   color: #b7eb8f;
 }
 
-
 .status.testing {
   border:1px solid #ffe58f; /* 黄色 */
   color: #fab487;
 }
-
+.foot{
+  display: flex;
+  width: 100%;
+  margin-top: 10px;
+  .left{
+    width: 70%;
+    display: flex;
+    gap:10px;
+  }
+  .right{
+    width: 30%;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
 
 .wrapper{
   margin:10px auto;
@@ -228,6 +244,7 @@ const edit = ((index,row)=>{
 }
 .table{
   margin-top: 10px;
+  min-height: 40vh;
   width:100%;
 }
 .icon-gap{