数据处理

src/components/developKnow/KnowledgeAll.vue

@@ -2,14 +2,11 @@
   <div class="addMedicalMultRelationWrapper">
     <crumbs :title="minTitle" fix="fixed" linkTo="MedicalMultRelation"></crumbs>
     <div class="tabList">
-      <ul>
-        <li>ICD10疾病类别</li>
-        <li>科室疾病类别</li>
-        <li>药物类别</li>
-        <li>症状类别</li>
-        <li>手术和操作类别</li>
-        <li>实验室检查类别</li>
-        <li>辅助检查类别</li>
+      <ul class="clearfix">
+        <li :class="{'curTab':curId==item.id}" 
+          @click="()=>handleTabClick(item.id)" 
+          v-for="item in tab" :key="item.id"
+        >{{item.name}}<span v-if="curId==item.id"></span></li>
       </ul>
     </div>
     <div class="contents">
@@ -89,6 +86,16 @@ import api from '@api/knowledgeTree.js';
     data(){
       return{
         minTitle:'分诊人体图数据维护-添加',
+        tab:[
+          {name:'ICD10疾病类别',id:'1'},
+          {name:'科室疾病类别',id:'2'},
+          {name:'药物类别',id:'3'},
+          {name:'症状类别',id:'4'},
+          {name:'手术和操作类别',id:'5'},
+          {name:'实验室检查类别',id:'6'},
+          {name:'辅助检查类别',id:'7'},
+        ],
+        curId:'1',
         list: [],
         defaultProps: {
           children: 'nodeList',
@@ -119,6 +126,9 @@ import api from '@api/knowledgeTree.js';
       }
     },
     methods:{
+      handleTabClick(id){
+        this.curId = id
+      },
       getTreeList(){
         api.getlistTree({}).then((res) => {
           const { data } = res
@@ -298,18 +308,45 @@ import api from '@api/knowledgeTree.js';
 </script>
 <style lang="less" scoped>
 @import "../../less/admin.less";
+.content {
+  min-width: auto;
+  box-sizing: border-box;
+}
+.contents {
+  box-sizing: border-box;
+  box-sizing: border-box;
+}
 .tabList {
   position: fixed;
   top: 100px;
+  right: 20px;
+  left: 270px;
+  z-index: 10;
+  border-top: 10px solid #dee2ea;
+  border-bottom: 10px solid #dee2ea;
+  box-sizing: border-box;
   ul {
-      margin: 10px 0 0 20px;
+      margin: 0 0 0 20px;
+      background-color: #fff;
     li {
       float: left;
       height: 60px;
       line-height: 60px;
-      background-color: #fff;
-      padding: 0 20px;
+      margin: 0 15px;
       box-sizing: border-box;
+      cursor: pointer;
+      position: relative;
+      span {
+        position: absolute;
+        bottom: 10px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: #21CBC7;
+      }
+    }
+    .curTab {
+        color: #21CBC7;
     }
   }
 }