专业选择

src/views/career/plan/UniversitiesColleges.vue

@@ -69,12 +69,12 @@ export default {
     display: inline-block;
     width: 80px;
     font-size: 14px;
+    padding: 5px 10px ;
     text-align: center;
     &.active{
       color: #fff;
       border-radius: 4px ;
       border: none;
-      padding: 5px 10px ;
       font-weight: 400;
       background: #42b983;
     }

src/views/career/zhiyuan/components/recommend.vue

@@ -27,7 +27,8 @@
             <span class="radiaTitle">专业类别:</span>
           </div>
           <el-radio-group v-model="currentMajor">
-            <el-radio-button label="">所有</el-radio-button>
+            <el-radio-button label="">
+              <span @click="clear">所有</span></el-radio-button>
             <el-radio-button v-for="item in majorList" :key="item.code" :label="item.code" style="margin-bottom:10px">
               {{ item.name }}
             </el-radio-button>
@@ -42,12 +43,19 @@
             <div class="no_limited">
               <el-checkbox @change="changeAll"   v-model="isAll">全部</el-checkbox>
             </div>
-            <el-checkbox-group v-model="checkedList" >
+            <el-checkbox-group v-model="checkedList" :max="10">
               <el-checkbox  v-for="item in childrenMajors" :label="item.code" :key="item.code">{{item.name}}</el-checkbox>
             </el-checkbox-group>
           </div>
         </el-row>
       </div>
+      <div class="selected">
+         <span class="f14 f-666">您已选择：</span>
+         <div class="tags" style="width: 100%">
+           <el-tag  @close="handleClose(item)" type="success" class="mr5 mb5"  closable v-for="item in checkedListName">{{item.name}}</el-tag>
+         </div>
+         <el-button plain size="mini"  @click="clear">清除</el-button>
+      </div>
     </div>
     <div class="zhiyuan-list">
       <mx-table :propDefines="propDefines" :rows="rows"></mx-table>
@@ -121,6 +129,19 @@ export default {
     })
   },
   computed: {
+    // 所有二级
+    majorAllChildren() {
+      let arr = []
+      this.majorList.map(item => {
+        arr = [...arr,...item.children]
+      })
+      return arr
+    },
+    checkedListName() {
+      return this.majorAllChildren.filter(item => {
+        return this.checkedList.findIndex(code => code == item.code) != -1
+      }) || []
+    },
     childrenMajors() {
       if(!this.currentMajor) return []
       return this.majorList.find(item => {
@@ -146,12 +167,27 @@ export default {
     },
   },
   methods: {
+    handleClose(item) {
+      const index = this.checkedList.findIndex(code => code == item.code)
+      this.checkedList.splice(index,1)
+    },
+    clear() {
+      if(!this.checkedList.length) return
+      this.checkedList = []
+    },
     changeAll(val){
       const checkedList =  this.checkedList
+
       if(val) {
         // 添加
         this.childrenMajors.forEach(item => {
+          if(this.checkedList.length >= 10) {
+            this.$message.warning('最多选择10个专业')
+            throw Error('最多选择10个专业')
+          }
           if(this.checkedList.findIndex(code => code == item.code) == -1 ){
+
+
             this.checkedList.push(item.code)
           }
         })
@@ -188,11 +224,20 @@ export default {
 .more span {
   margin-right: 10px;
 }
-
+.selected{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  margin-bottom: 20px;
+  background: #42b98340;
+  span{
+    flex-shrink: 0;
+  }
+}
 .filters {
   padding: 10px 0px;
   border: 1px solid #eee;
-  margin-bottom: 20px;
 }
 
 .filter_name {