配置选中颜色

src/views/ToConfigure/components/memberConfiguration.vue

@@ -2,14 +2,18 @@
   <el-container>
     <el-main class="member_main">
       <div class="member_title">成员</div>
-      <div class="member_all cals" style="color: #409EFF" @click="memberAll('all')">全部成员</div>
-      <div class="member_all member_margin cals" @click="memberAll('not')">未加入团队的成员</div>
+      <div class="member_all cals" :class="{'color-blue': isActive === 'all'}" @click="memberAll('all')">全部成员</div>
+      <div class="member_all member_margin cals" :class="{'color-blue': isActive === 'not'}" @click="memberAll('not')">未加入团队的成员</div>
       <div class="member_title">团队</div>
       <div style="max-height: calc(100vh - 285px); overflow-y: auto;">
         <div class="member_team">我的团队</div>
-        <div v-for="item in memberList[0]" :key="item.code">
+        <div v-for="item in memberList[0]" :key="'my' + item.code">
           <div class="member_all member_space_between">
-            <span class="navList cals" @click="myTeam(item)">{{ item.name }}</span>
+            <span
+              class="navList cals"
+              :class="{'color-blue': isActive === 'my' + item.code}"
+              @click="myTeam(item);isActive = 'my' + item.code"
+            >{{ item.name }}</span>
             <el-dropdown placement="bottom" trigger="click">
               <span class="el-dropdown-link">
                 ···
@@ -22,9 +26,13 @@
           </div>
         </div>
         <div class="member_team" style="margin-top: 25px;">其他团队</div>
-        <div v-for="item in memberList[1]" :key="item.code">
+        <div v-for="item in memberList[1]" :key="'all' + item.code">
           <div class="member_all member_space_between">
-            <span class="navList cals" @click="myTeam(item)">{{ item.name }}</span>
+            <span
+              class="navList cals"
+              :class="{'color-blue': isActive === 'all' + item.code}"
+              @click="myTeam(item);isActive = 'all' + item.code"
+            >{{ item.name }}</span>
             <el-dropdown placement="bottom" trigger="click">
               <span class="el-dropdown-link">
                 ···
@@ -55,6 +63,7 @@ export default {
   },
   data() {
     return {
+      isActive: 'all',
       memberList: [],
       titltName: {
         name: '',
@@ -91,24 +100,12 @@ export default {
       this.teamQueryTeamListByName()
     },
     memberAll(val) {
-      const data = val === 'all' ? '全部成员' : '未加入团队的成员'
-      this.changeStyle(data)
+      this.isActive = val
       this.$emit('details', val)
     },
     myTeam(item) {
       item.num = 'myTeam'
-      this.changeStyle(item.name)
       this.$emit('details', item)
-    },
-    changeStyle(data) {
-      const code = document.getElementsByClassName('cals')
-      for (let i = 0; i < code.length; i++) {
-        if (code[i].innerHTML === data) {
-          code[i].style.color = '#409EFF'
-        } else {
-          code[i].style.color = '#333333'
-        }
-      }
     }
   }
 }
@@ -176,4 +173,7 @@ export default {
   text-overflow: ellipsis;
   display: inline-block;
 }
+.color-blue {
+  color: #409EFF;
+}
 </style>