被选中优化

src/components/ChooseStudent/index.vue

@@ -44,7 +44,7 @@
               @current-change="handleCurrentChange" />
           </div>
           <div class="multipleList" v-if="props.selectType == 'multiple'">
-            <ul>
+            <ul ref="scrollContainer">
               <li v-for="item in selectValue" :key="item.student_id">
                 <div class="pic">
                   <img :src="item.face_pic || item.logo_url" />
@@ -68,6 +68,7 @@ import dataDictionary from "@/utils/dataDictionary"
 const { proxy } = getCurrentInstance() as any;
 const emit = defineEmits(['returnData']);
 const myTable = ref();
+const scrollContainer = ref();
 //父值
 const props = defineProps({
   selectType: {
@@ -158,7 +159,7 @@ const getStudent = () => {
   }
   proxy?.$http.common.studentList(params).then((res: any) => {
     if (res.data.length > 0) {
-      tableData.value = res.data.map((item: any) => {
+      let list = res.data.map((item: any) => {
         let classObj = classList.value.find((items: any) => {
           return items.id == item.class_id;
         })
@@ -167,6 +168,18 @@ const getStudent = () => {
         item.student_id = item.id;
         return item;
       });
+      tableData.value = list;
+      nextTick(() => {
+        //添加点选
+        let ids = selectValue.value.map((item: any) => {
+          return item.student_id
+        })
+        list.forEach((item: any) => {
+          if (ids.includes(item.student_id)) {
+            myTable.value.toggleRowSelection(item, true)
+          }
+        })
+      })
       page.value.total = res.total;
     }
   });
@@ -204,25 +217,24 @@ const handleCellClickChange = (data: any) => {
       //不在内就添加
       myTable.value.toggleRowSelection(data, true)
       selectValue.value.push(data);
+      nextTick(() => {
+        scrollContainer.value.scrollLeft = scrollContainer.value.scrollWidth;
+      });
     } else {
       //在内就移除
       myTable.value.toggleRowSelection(data, false)
-      delChooseStudent(data);
+      selectValue.value = selectValue.value.filter((item: any) => {
+        return item.student_id != data.student_id
+      })
     }
-
   }
 };
 
-//全选操作
+//全选/不选操作
 const handleSelectAll = (data: any) => {
   selectValue.value = data;
 };
 
-//多选行
-const handleSelectionChange = (data: any) => {
-  selectValue.value = data;
-};
-
 //双击
 const handleDblclick = (data: any) => {
   if (props.selectType == 'single') {
@@ -235,6 +247,8 @@ const delChooseStudent = (data: any) => {
   selectValue.value = selectValue.value.filter((item: any) => {
     return item.student_id != data.student_id
   })
+  //表格勾选也移除
+  myTable.value.toggleRowSelection(data, false)
 };
 
 //确定
@@ -508,6 +522,10 @@ defineExpose({
   cursor: pointer;
 }
 
+::v-deep(.table .el-table__body-wrapper .el-table-column--selection .el-checkbox) {
+  pointer-events: none;
+}
+
 ::v-deep(.table2 .el-table__body tr.current-row > td) {
   background: #13ED84 !important;
   color: #ffffff !important;