顶部搜索框修改

src/layouts/header/index.vue

@@ -4,10 +4,10 @@
             <!-- <img width="180" v-if="isLogin || (isManager && showSetting) || !isUser" src="@/assets/img/logo.png" alt=""> -->
             <span v-if="token && isManager && !showSetting">{{schoolName}}</span>
         </a>
-        <div class="search" v-if="isData">
+        <!-- <div class="search" v-if="isData">
             <input v-model="keyword" type="text" placeholder="请输入数据表名称">
             <img src="../../assets/img/search.png" alt="" class="search-icon">
-        </div>
+        </div> -->
         <div class="inner">
             <div style="height: 70px;"></div>
             <navbar ref="nav"></navbar>

src/pages/data/list/index.vue

@@ -66,9 +66,16 @@
                 </template>
              </el-menu>
         </div>
+
         <div class="right">
             <div class="page">
                 <h6 class="p-title">数据介绍</h6>
+                <div>
+                    <div class="search">
+                        <input v-model="keyword" type="text" placeholder="请输入数据表名称">
+                        <img src="../../../assets/img/search.png" alt="" class="search-icon">
+                    </div>
+                </div>
                 <div class="page-content">
                     <div class="desc">{{introduce}}</div>
 
@@ -162,6 +169,7 @@ export default {
             defaultOpenType: [],
             introduce: '',
             keyword: '',
+            search:'',
             listData: [],
             listDataAll: [],
             searchListData: [],
@@ -206,7 +214,8 @@ export default {
                     name: '年频'
                 },
             ],
-            currentRow: null
+            currentRow: null,
+            searchTimer:null
         }
     },
     computed: {
@@ -214,11 +223,22 @@ export default {
             'schoolId'
         ]),
     },
-    mounted() {
-        bus.$on('initData',keyword => {
-            this.keyword = keyword
+    watch:{
+        keyword: function(val) {
+            clearTimeout(this.searchTimer)
+            if(!this.rendered){
+                this.searchTimer = setTimeout(() => {
                     this.initData()
-        })
+                },500)
+            }
+            this.rendered = false
+        },
+    },
+    mounted() {
+        // bus.$on('initData',keyword => {
+        //     this.keyword = keyword
+        //     this.initData()
+        // })
 
         this.getType()
         if(this.$route.query.download){
@@ -235,7 +255,6 @@ export default {
             this.$post(this.api.getTableByClassification).then(res => {// 请求菜单栏
                 let typeId = this.typeId // 取得传值的id
                 let introduce = ''// 对应股票的介绍，规则为无children则取上级
-                console.log(res,'侧边栏的值');
                 res.map(n => {// 循环第一次
                     n.id = String(n.id)
                     if(typeId && n.id == typeId) introduce = n.introduce
@@ -325,6 +344,7 @@ export default {
         },
         selectType(index,indexPath){
             let introduce = ''
+            this.keyword = ''
             let list = this.typeList
             list.map(n => {
                 if(n.id == index){
@@ -364,7 +384,7 @@ export default {
             return result
         },
         openType(index,indexPath){
-            console.log(11,this.typeList)
+            // console.log(11,this.typeList)
             let id = this.findId(this.typeList,index)
             this.selectType(id,indexPath)
         },
@@ -561,4 +581,42 @@ export default {
             }
         }
     }
+    .search{
+        z-index: 2;
+        position: absolute;
+        top: 10px;
+        left: 83%;
+        transform: translate(-50%);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 300px;
+        height: 50px;
+        padding: 7px 10px;
+        margin: 0 auto;
+        background-color: #fff;
+        border: 1px solid #e6e6e6;
+        border-radius: 5px;
+        
+        input{
+            width: 195px;
+            margin-left: 10px;
+            font-size: 14px;
+            color: #333;
+            background-color: transparent;
+            border: 0;
+            &::-webkit-input-placeholder{color: #999}
+            &::-moz-placeholder{color: #999}
+            &:-moz-placeholder{color: #999}
+            &:focus{
+                outline: none;
+            }
+        }
+        .remove{
+            cursor: pointer;
+        }
+        .search-icon{
+            width: 18px;
+        }
+    }
 </style>