pageSty

src/views/publishers/publisherList.vue

@@ -8,17 +8,13 @@
         </el-col>
         <el-col :span="12" :style="{ textAlign: 'right' }">
           <el-button @click="empty">重置</el-button>
-          <el-button type="primary" @click="check" >查询搜索</el-button>
+          <el-button type="primary" @click="check">查询搜索</el-button>
         </el-col>
       </el-row>
       <el-row :style="{ marginLeft: '32px' }">
         <el-form inline>
           <el-form-item label="联系人名称: ">
-            <el-input
-              placeholder="筛选联系人"
-              clearable
-              v-model="value1"
-            ></el-input>
+            <el-input placeholder="筛选联系人" clearable v-model="value1"></el-input>
           </el-form-item>
         </el-form>
       </el-row>
@@ -36,13 +32,8 @@
       </el-row>
     </div>
     <div class="pubform">
-      <el-table :data="tableData"
-        stripe
-        border
-        :style="{ borderRadius: '4px' }"
-        :header-cell-style="{ 'text-align': 'center' }"
-        :cell-style="{'text-align':'center'}"
-      >
+      <el-table :data="tableData" stripe border :style="{ borderRadius: '4px' }"
+        :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
         <el-table-column prop="issuerId" label="ID"> </el-table-column>
         <el-table-column prop="headPortrait" label="头像">
           <template v-slot:default="slotProps">
@@ -55,33 +46,21 @@
         </el-table-column>
         <el-table-column prop="opreation" label="操作">
           <template slot-scope="scope">
-            <el-button type="primary" @click="turnPage(scope.row)"
-              >修改</el-button
-            >
-            <el-button type="danger" @click="deleteP(scope.row)"
-              >删除</el-button
-            >
+            <el-button type="primary" @click="turnPage(scope.row)">修改</el-button>
+            <el-button type="danger" @click="deleteP(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
-      <el-row :style="{ marginTop: '16px' }">
-      <el-col :span="24" :style="{ textAlign: 'right' }">
-        <el-pagination
-         background
-          :page-size="10"
-          layout="total, prev, pager, next"
-          :total="100"
-        >
-        </el-pagination>
-      </el-col>
-    </el-row>
+      <el-pagination @current-change="handleCurrentChange" background layout="total, prev, pager, next" :total="total"
+        id="page" :page-size="10">
+      </el-pagination>
     </div>
-    
+
   </div>
 </template>
 <script>
 import { publishList } from "@/api/publisher/publish";
-import { searchPublish, deletePublish,selectpublish } from "@/api/publisher/publish";
+import { searchPublish, deletePublish, selectpublish } from "@/api/publisher/publish";
 export default {
   name: "publisherList",
   data() {
@@ -95,7 +74,7 @@ export default {
       total: 1, // 数据个数
       issuerID: "", //发行商ID
 
-      value1:''
+      value1: ''
     };
   },
   mounted() {
@@ -110,8 +89,8 @@ export default {
     },
   },
   methods: {
-    
-    
+
+
     turnPage(rows) {
       // console.log(rows)
       this.$router.push({
@@ -154,13 +133,13 @@ export default {
         let searchCon = {
           issuerName: this.value1,
         }
-        selectpublish(searchCon).then((res)=>{
-         this.tableData=res.rows;
-         this.total=res.total
+        selectpublish(searchCon).then((res) => {
+          this.tableData = res.rows;
+          this.total = res.total
         })
-       
+
       } else {
-          this.$message("请先输入再搜索")
+        this.$message("请先输入再搜索")
       }
     },
     addPublish() {
@@ -186,12 +165,20 @@ export default {
   border-radius: 4px;
   margin: 16px;
 }
+
 .addpub {
   border: 1px solid #ccc;
   border-radius: 4px;
   margin: 16px;
 }
+
 .pubform {
   padding: 0 16px;
 }
+
+#page {
+  float: right;
+  margin-right: 20px;
+  margin-top: 20px;
+}
 </style>