sample

src/views/diagnosis/diagnosis.vue

@@ -214,6 +214,7 @@ export default {
   data() {
     return {
       query:{
+        triggerScroll:0,    //触发按类别定
         itemTypeFlag:true, //项目类别是否 作为查询条件 
         itemTypeId:'',
         keyWords:'',        
@@ -302,6 +303,7 @@ export default {
     // 供树节点组件调用，更新当前所选的项目类别
     refreshItemTypeId(itemTypeId){
       this.query.itemTypeId = itemTypeId
+      this.query.triggerScroll++
     },
 
     // 供明建议组件调用，更新所选建议
@@ -352,7 +354,8 @@ export default {
         lfind = arrayExistObj(this.tableData, 'id', v.id)
         if (lfind > -1) {
           this.$refs['elTable'].setCurrentRow(this.tableData[lfind])
-          this.rowClick(this.tableData[lfind])          
+          this.rowClick(this.tableData[lfind])
+          this.scrollToRow(lfind)          
         }
       }    
       //console.log('v,query.diagnosis',v,this.query.diagnosis)
@@ -364,6 +367,23 @@ export default {
         this.$refs['elSelectKeyWords'].focus(); //total  asbItemId       
       });      
     },
+
+    // 选体检类别时，定位到相应类别的第1行
+    triggerScroll(){
+      if(!this.query.itemTypeId) return
+      let lfind = arrayExistObj(this.tableData,'itemTypeId',this.query.itemTypeId)
+      if(lfind > -1){
+        this.scrollToRow(lfind)
+      }
+    },
+    scrollToRow(rowNum){
+      let dom = this.$refs['elTable'].bodyWrapper
+      this.$nextTick(() =>{
+        let tableHeight = this.window.pageHeight < 600 ? 200 : Math.floor((this.window.pageHeight - 200) / 2)
+        let rowHeight = 36.96
+        dom.scrollTo(0, rowHeight * rowNum - tableHeight*rowNum/(2*this.tableData.length) ) 
+      })
+    },
  
 
     //拖拽
@@ -547,6 +567,16 @@ export default {
     //     }
     //   }
     // },
+    "query.triggerScroll":{
+      immediate: true, // 立即执行
+      deep: true, // 深度监听复杂类型内变化
+      handler(newVal,oldVal){
+        // console.log('watch:patientRegisterNo:',newVal,oldVal)
+        if(newVal != oldVal){
+          this.triggerScroll();                 
+        }
+      }
+    },
   },
 };
 </script>