讲师管理定位高亮

src/components/project/BatchLecturer.vue

@@ -6,7 +6,7 @@
     placement="right"
     width="70%"
   >
-    <div class="drawerMains">
+    <div class="drawerMains" ref="drawerContent">
       <div class="headers" style="margin-top:-24px;">
         <div class="headerTitle">{{ name }}</div>
         <img
@@ -33,12 +33,13 @@
           <div class="table" style="padding-bottom:72px;">
             <a-table
               :columns="columns"
-              :data-source="searchTrue?searchList:tableData"
+              :data-source="tableData"
               :pagination="false"
               :scroll="{ x: 'max-content' }"
               row-key="id"
               :loading="loading"
               :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+              :custom-row="customRow"
             >
               <template #action="{ record }">
                 <div class="action">
@@ -71,6 +72,14 @@ const props = defineProps({
     default: ""
   }
 });
+const drawerContent = ref(null)
+const customRow = (record) => {
+  return {
+    style:{
+      backgroundColor: searchTrue.value && searchList.value.some(item => item.id === record.id) ? '#b1ffbd !important' : '',
+    }
+  };
+};
 watch(()=>props.visible,(val)=>{
   if(val){
     loading.value = true
@@ -100,6 +109,7 @@ const resetData = () => {
   searchData(false)
 }
 const searchData = (val) => {
+  // drawerContent.value.scrollTo({top:200,behavior: 'smooth'})
   searchTrue.value = val
   if(!nameUserNo.value&&!dateValue.value){
     searchList.value = tableData.value;
@@ -121,6 +131,11 @@ const searchData = (val) => {
     return isNameMatch || isDateInRange;
   });
   searchList.value = filteredList;
+  let scrollHeight = null
+  filteredList.length && (scrollHeight = tableData.value.findIndex(item => item.id === filteredList[0].id))
+  if(scrollHeight||scrollHeight==0){
+    drawerContent.value.scrollTo({top:(scrollHeight+1)*50+200,behavior: 'smooth'})
+  }
 }
 const loading = ref(false)
 const selectedRowKeys = ref([])
@@ -300,12 +315,12 @@ const queryDrawer = () => {
 
 <style lang="scss" scoped>
 
-
 .largeDrawerInside {
   .drawerMains {
     min-width: 600px;
     // margin: 0px 32px 0px 32px;
-    overflow-x: auto;
+    height:100%;
+    overflow: auto;
     display: flex;
     flex-direction: column;
     padding:24px;
@@ -319,6 +334,7 @@ const queryDrawer = () => {
       margin-bottom: 20px;
 
       .headerTitle {
+        margin: 24px 0;
         font-size: 18px;
         font-weight: 600;
         color: #333333;