性能指标添加分页,修改样式

src/views/business/performance/zhiBiaoConfig.vue

@@ -17,7 +17,7 @@
           </el-row>
           <el-row type="flex">
             <el-col>
-              <el-table :data="tableData" @selection-change="handleSelectionChange" ref="table">
+              <el-table :data="paginatedData" @selection-change="handleSelectionChange" ref="table">
                 <el-table-column type="selection" width="55"></el-table-column>
                 <el-table-column label="性能指标代码" prop="target_key_">
                   <template slot-scope="{ row }">
@@ -31,6 +31,14 @@
                 </el-table-column>
                 <el-table-column prop="id_" v-if="false"></el-table-column>
               </el-table>
+              <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="currentPage"
+                :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="tableData.length"
+              />
             </el-col>
           </el-row>
         </div>
@@ -52,9 +60,18 @@ export default {
   data() {
     return {
       tableData: [],
-      selectedRows: []
+      selectedRows: [],
+      currentPage: 1,
+      pageSize: 10
     };
   },
+  computed: {
+    paginatedData() {
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      return this.tableData.slice(start, end);
+    }
+  },
   mounted() {
     this.loadData();
   },
@@ -81,6 +98,13 @@ export default {
     handleSelectionChange(selection) {
       this.selectedRows = selection;
     },
+    handleSizeChange(newSize) {
+      this.pageSize = newSize;
+      this.currentPage = 1;
+    },
+    handleCurrentChange(newPage) {
+      this.currentPage = newPage;
+    },
     save() {
       const payload = this.tableData.map(item => ({
         id: item.id_ || '',
@@ -137,4 +161,14 @@ export default {
   margin-left: 200px;
   margin-right: 200px;
 }
-</style>
+
+.reagentChange {
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 5px;
+}
+
+::v-deep .el-table .cell {
+  padding-right: 0px !important;
+}
+</style>