修改自定义表格字段按钮的样式

src/view/memberGroup/memberGroupDetail.vue

@@ -25,9 +25,6 @@
           <!--            </div>-->
         </div>
         <div class="memberGroupDetail-wrap__table">
-          <span class="defined-btn" @click="showDefined">
-            <i class="el-icon-setting"></i>
-          </span>
           <el-table v-loading="loading" @sort-change="sortChange" :data="memberGroupDetailData" style="width: 100%">
             <div v-for="item in selectedFields" :key="item.code">
               <el-table-column
@@ -231,7 +228,13 @@
                 </template>
               </el-table-column>
             </div>
-            <el-table-column label="操作">
+            <el-table-column>
+              <template slot="header">
+                <div class="defined-btn" @click="showDefined">
+                  <span>操作</span>
+                  <i class="el-icon-setting"></i>
+                </div>
+              </template>
               <template slot-scope="scope">
                 <a
                   rel="nofollow noopener noreferrer"
@@ -689,20 +692,17 @@ export default {
   font-size: 14px;
   color: #606266;
   .defined-btn {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 1;
+    padding: 0;
+    width: 65px;
     display: flex;
-    justify-content: center;
     align-items: center;
-    width: 59px;
-    height: 59px;
-    font-size: 20px;
-    color: #999;
-    background: #eaeaea;
     cursor: pointer;
-    &:hover {
+    i {
+      margin-left: 10px;
+      font-size: 20px;
+      color: #999;
+    }
+    &:hover i {
       color: #666;
     }
   }