筛选项优化

src/views/projectManage/bugList/details/filterList.vue

@@ -14,17 +14,18 @@
       >
         <template slot-scope="scope">
           <el-row>
-            <el-col v-if="scope.row.showEdit" :span="22">
-              <el-input
+            <el-col v-show="scope.row.showEdit" :span="22">
+              <input
+                :ref="'input'+scope.row.index"
                 v-model="filterList[scope.row.index].name"
-                size="mini"
-                placeholder="请输入过滤器名称"
+                v-focus="focusState"
                 autofocus
+                placeholder="请输入过滤器名称"
                 @keyup.enter.native="updateFilter(scope.row,true)"
                 @blur="updateFilter(scope.row)"
-              />
+              >
+              <i class="el-icon-edit" @click.stop="cancel(scope.row)" />
             </el-col>
-            <el-col v-if="scope.row.showEdit" :span="2"><i class="el-icon-edit" @click.stop="cancel(scope.row)" /></el-col>
             <el-col v-if="!scope.row.showEdit" :span="22">
               <span class="item-name">{{ scope.row.name }}</span>
               <i class="el-icon-edit" @click.stop="editFilter(scope.row)" />
@@ -67,6 +68,15 @@ import {
 } from '@/api/defectManage'
 import { deepClone } from '@/utils/global'
 export default {
+  directives: {
+    focus: {
+      update: function(el, { value }) {
+        if (value) {
+          el.focus()
+        }
+      }
+    }
+  },
   props: {
     showFilter: {
       type: Boolean,
@@ -76,6 +86,7 @@ export default {
   },
   data() {
     return {
+      focusState: false,
       show: this.showFilter,
       filterList: [],
       copyFilterList: [],
@@ -114,6 +125,7 @@ export default {
       }
     },
     editFilter(e) {
+      this.focusState = true
       this.$set(this.filterList[e.index], 'showEdit', true)
     },
     cancel(e) {
@@ -153,6 +165,7 @@ export default {
         })
         this.getFilterList()
       }
+      this.$set(this.filterList[e.index], 'showEdit', false)
       this.$emit('deleteFilter')
     },
     handleSizeChange(e) {
@@ -172,4 +185,7 @@ export default {
 i {
   cursor: pointer;
 }
+input {
+  outline: none;
+}
 </style>