营销模块改bug

src/views/app/gridMarketing.vue

@@ -73,6 +73,22 @@
                         <option :key="i" v-for="(item,i) in categories" :value="item.id">{{item.name}}</option>
                     </select>
                 </div>
+
+
+                <div class="divInput">
+                    <div class="input" @click="openValue">
+                        <input v-model="value" type="text" placeholder="筛选实验类型">
+
+                    </div>
+                    <div class="list" v-show="show">
+                        <ul>
+                            <li @click="getvalue(index,item)" v-for="(item,index) in tableData" :key="item.index">{{
+                                item.name }}
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
             </div>
             <div ref="kpiRef" class="kpis">
                 <div class="kpi" :style="{width: kpiWidth}">
@@ -186,6 +202,21 @@
         },
         data() {
             return {
+                tableData: [
+                    {
+                        'name': 111
+                    },
+                    {
+                        'name': 222
+                    },
+                    {
+                        'name': 333
+                    }, {
+                        'name': 444
+                    }
+                ],
+                show: false,
+                value: '',
                 categories: [],
                 categoriesOrigin: [],
                 public: true,
@@ -302,6 +333,13 @@
             }
         },
         methods: {
+            openValue() {
+                this.show = !this.show;
+            },
+            getvalue(index, item) {
+                this.value = item.name;
+                this.show = false;
+            },
             handleSelect(e) {
                 let id = parseInt(e.target.value);
                 this.kpiList = [];
@@ -1323,5 +1361,53 @@
             width: 0.4rem;
         }
 
+
     }
+
+    .divInput {
+       position: absolute;
+
+    }
+        ul li {
+            list-style: none;
+        }
+
+        .input {
+            width: 140px;
+            height: 40px;
+            line-height: 40px;
+            padding-left: 10px;
+            border: 1px solid #cccccc;
+            position: relative;
+        }
+
+        .input input {
+            border: none;
+            outline: none;
+            width: 90%;
+        }
+
+        .input img {
+            position: absolute;
+            right: 34px;
+            top: 48%;
+        }
+
+        .list {
+            width: 150px;
+            border: 1px solid #cccccc;
+            overflow: hidden;
+        }
+
+        .list ul li {
+            width: 100%;
+            height: 30px;
+            cursor: pointer;
+            line-height: 30px;
+            padding-left: 10px;
+        }
+
+        .list ul li:hover {
+            background-color: #cccccc;
+        }
 </style>