菌株性能验证组件新增分页；新增显示菌株编号

src/views/component/sop/performanceVerification.vue

@@ -1,13 +1,20 @@
 <template>
     <div class="performance">
         <div class="table">
-            <el-table :data="tableData" border>
+            <el-table :data="showPaperList" border>
                 <el-table-column
                     label="序号"
                     width="50"
                     type="index"
+                    :index="showIndex"
                 />
-                <el-table-column label="菌株名称" prop="junZhuMingCheng" width="180" />
+                <el-table-column label="菌株名称" prop="junZhuMingCheng" width="180">
+                    <template slot-scope="{row}">
+                        <template>
+                            <span>{{ row.junZhuMingCheng+' '+row.junZhuBianHao }}</span>
+                        </template>
+                    </template>
+                </el-table-column>
                 <el-table-column label="菌落形态" prop="zhenJunXingTai" width="180">
                     <template slot-scope="{row}">
                         <template v-if="!readonly && !setDisabled(row,'1') && !shiFouGuoShen">
@@ -76,6 +83,16 @@
                     </template>
                 </el-table-column>
             </el-table>
+            <el-pagination
+                style="margin-top: 5px; padding-bottom: 10px"
+                :current-page="pagination.currentPage"
+                :page-sizes="[10, 20,30, 50]"
+                :page-size="pagination.pageSize"
+                layout="prev,pager,next,jumper,sizes,->,total"
+                :total="tableData.length"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+            />
         </div>
     </div>
 </template>
@@ -94,6 +111,10 @@ export default {
     },
     data () {
         return {
+            pagination: {
+                pageSize: 10,
+                currentPage: 1
+            },
             tableData: [],
             dic: {
                 '1': '菌落形态',
@@ -108,6 +129,11 @@ export default {
     computed: {
         shiFouGuoShen () {
             return this.formData.shiFouGuoShen === '已编制'
+        },
+        showPaperList () {
+            const start = (this.pagination.currentPage - 1) * this.pagination.pageSize
+            const end = start + this.pagination.pageSize
+            return this.tableData.slice(start, end)
         }
     },
     watch: {
@@ -169,6 +195,27 @@ export default {
         setDisabled (row, index) {
             const arr = row.yanZhengNeiRong?.split(',') || []
             return !arr.includes(index)
+        },
+        // 选择器切换
+        onSelectorChange () {
+            this.pagination = {
+                pageSize: 10,
+                currentPage: 1
+            }
+        },
+
+        // 当前页码改变
+        handleCurrentChange (val) {
+            this.pagination.currentPage = val
+        },
+        // 页码选择器改变
+        handleSizeChange (val) {
+            this.pagination.pageSize = val
+            this.pagination.currentPage = 1
+        },
+        // 分页连续序号
+        showIndex (index) {
+            return index + 1 + (this.pagination.currentPage - 1) * this.pagination.pageSize
         }
     }
 }