list调整

src/views/project/form/ProjectCourseSelect.vue

@@ -3,7 +3,7 @@
     <a-card :bordered="false" title="项目课程选择">
       <a-row type="flex" justify="center" align="top">
         <a-col :span="4" id="tree">
-          <a-menu v-model="menuKey" mode="horizontal" @select="menuChack" >
+          <a-menu v-model="menuKey" mode="horizontal" @select="menuChack">
             <a-menu-item key="sys">系统课程</a-menu-item>
             <a-menu-item key="self">自主课程</a-menu-item>
           </a-menu>
@@ -24,20 +24,21 @@
               </a-row>
             </a-form>
             <!-- onChange: onSelectChange, -->
-            <s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" 
+            <s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows,onChange: onSelectChange,  onSelect: tableOnSelect ,onSelectAll: tableAllSelected }">
-              :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows,onChange: onSelectChange,  onSelect: tableOnSelect ,onSelectAll: tableAllSelected }">
               <span slot="serial" slot-scope="text, record, index">
                 {{ index + 1 }}
               </span>
             </s-table>
           </a-col>
           <a-col :span="6" id="select">
+            <div class="alist" >
               <p>点击列表项取消选择或【<a @click="removeAllSelece">清空所有</a>】</p>
               <a-list size="small" :data-source="selectedRows" :rowKey="(item) => item.id">
                 <a-list-item slot="renderItem" slot-scope="item" @click="changeList({ item })">
                   {{ item.courseName + '（' + item.courseCode + '）' }}
                 </a-list-item>
               </a-list>
+            </div>
           </a-col>
         </a-col>
       </a-row>
@@ -72,7 +73,7 @@ export default {
       menuKey: ['sys'], //默认系统课程
 
       // 查询参数
-      queryParam: { name: '', classType: 1 ,type: 1},
+      queryParam: { name: '', classType: 1, type: 1 },
       replaceFields: { children: 'children', title: 'name', key: 'value', value: 'id' },
       expandedKeys: [],
       autoExpandParent: true,
@@ -106,11 +107,11 @@ export default {
   // 方法集合
   methods: {
     //菜单改变，
-    menuChack(){
+    menuChack() {
-      console.log('menuKey',this.menuKey)
+      console.log('menuKey', this.menuKey)
       let type = 2;
-      console.log('菜单改变',this.menuKey[0])
+      console.log('菜单改变', this.menuKey[0])
-      if(this.menuKey[0] === 'self') type = 1;
+      if (this.menuKey[0] === 'self') type = 1;
       this.queryParam.type = type
       this.getCourseTreeData(type);
       this.$refs.table.refresh(true);
@@ -146,8 +147,8 @@ export default {
     },
 
     /** table取消勾选 */
-    tableOnSelect(record, selected, selectedRows, nativeEvent){
+    tableOnSelect(record, selected, selectedRows, nativeEvent) {
-      if(!selected) { //取消勾选操作
+      if (!selected) { //取消勾选操作
         let keys = this.selectedRowKeys.filter(item => item != record.id);
         let rows = this.selectedRows.filter(item => item.id != record.id);
 
@@ -156,11 +157,11 @@ export default {
       }
     },
     /** table取消全选 */
-    tableAllSelected(selected, selectedRows, changeRows){
+    tableAllSelected(selected, selectedRows, changeRows) {
-      if(!selected){ //取消勾选操作
+      if (!selected) { //取消勾选操作
-        let exKeys = changeRows.map(value => {return value.id})
+        let exKeys = changeRows.map(value => { return value.id })
-        let keys = this.selectedRowKeys.filter(item => {return !exKeys.includes(item)});
+        let keys = this.selectedRowKeys.filter(item => { return !exKeys.includes(item) });
-        let rows = this.selectedRows.filter(item => {return !exKeys.includes(item.id)});
+        let rows = this.selectedRows.filter(item => { return !exKeys.includes(item.id) });
 
         this.selectedRows = rows;
         this.selectedRowKeys = keys;
@@ -213,14 +214,14 @@ export default {
     //查询课程列表
     queryCourseList() {
       console.log('this.treeDataOne-------', this.treeDataOne)
-      listByClass({ classType: this.treeDataOne[0] || 0 ,type: this.menuKey[0] === 'sys'?0:1}).then((res) => {
+      listByClass({ classType: this.treeDataOne[0] || 0, type: this.menuKey[0] === 'sys' ? 0 : 1 }).then((res) => {
         this.courseData = res.data
       })
     },
 
     //获取课程分类数据，转换成树结构
     getCourseTreeData(type) {
-      coursewareClassList({type:type}).then((res) => {
+      coursewareClassList({ type: type }).then((res) => {
         //list转🌲
         const list2tree1 = (list, parentId) => {
           return list.filter((item) => {
@@ -260,4 +261,11 @@ export default {
 }
 </script>
 <style scoped>
+.alist {
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  overflow: auto;
+  padding: 8px 24px;
+  height: 500px;
+}
 </style>