fix:优化自定义下拉框

src/components/SelectPanel/index.vue

 <template>
     <div>
-        <el-popover placement="bottom-start" width="200" trigger="click">
-            <el-select slot="reference" ref="selectBox" :value="selectKey" multiple  collapse-tags
+        <el-popover placement="bottom-start"  v-model="shwoPop" width="200" trigger="click">
+            <el-select slot="reference" ref="selectBox"  suffix-icon="el-close" :value="selectKey" multiple  collapse-tags
                 placeholder="请选择" @visible-change="$refs['selectBox'].blur()" @remove-tag="delTag">
                 <el-option label="1" value="a"></el-option>
-                <template #suffix>AAAA</template>
             </el-select>
             <div>
                 <el-row>
@@ -37,6 +36,7 @@ export default {
     },
     data() {
         return {
+            shwoPop:false,
             checkValue: {
                 category1: [],
                 category2: []
@@ -60,15 +60,33 @@ export default {
 
         selectKey(){
             return this.allcheck.map(v => v.value)
-        }
+        },
+
 
     },
 
     mounted() {
-
+        this.init()
     },
 
     methods: {
+        //初始化
+        
+        init(){
+            if(this.$refs['selectBox']){
+                const iconDom = this.$refs['selectBox'].$el.querySelector('.el-input__suffix .el-input__icon');
+                const closeWatch = this.$watch('shwoPop',(val => {
+                    const num = val ? 0 : 180;
+                    iconDom.style.transform=`rotateZ(${num}deg)`
+                }))
+                this.$once('hook:beforeDestroy', () => {
+                    closeWatch()
+                })
+            }else{
+                console.log('Not find ref of selectBox')
+            }
+        },
+
         //删除标签
         delTag(tag){
             this.allcheck = this.allcheck.filter(v =>{