单选和多选添加上下修改顺序

src/components/icss/SingleSelect.vue

@@ -19,6 +19,13 @@
                
             </div>
             <div class="main-area">
+                <div class="buttonBox"> 
+             
+                    <div class="bottomPartMid bottomPartMidss fl">
+                        <p><span class="el-icon-arrow-up" @click="toggleTopDownList(1)"></span></p>
+                        <p><span class="el-icon-arrow-down" @click="toggleTopDownList(2)"></span></p>
+                    </div>
+                </div>
                 <el-col v-for="(it,i) in rows" :key="i">
                     <el-input v-model="rows[i].name"
                               v-bind:class="{select:focusOn==i}"
@@ -30,6 +37,10 @@
                 </el-col>
                 <el-button @click="addRow">+</el-button>
             </div>
+            
+
+            
+
         </el-form>
     </div>
 </template>
@@ -81,6 +92,30 @@
                 }
             }
         }
+        .buttonBox {
+            width: 10%;
+            position: absolute;
+            right: 170px;
+            margin-top: 20px;
+        }
+        .bottomPartMid {
+            width: 8%;
+            p {
+            width: 100%;
+            text-align: center;
+            span {
+                cursor: pointer;
+                display: inline-block;
+                width: 30px;
+                height: 40px;
+                line-height: 40px;
+                margin: 0 auto;
+                border: 1px solid @icssBorder;
+                margin-bottom: 15px;
+                font-size: 18px;
+            }
+            }
+        }
         
         .el-button{
             width: 200px;
@@ -215,6 +250,39 @@
           }
           
         },
+        toggleTopDownList(type){
+          if(this.focusOn == '-1') {
+            return
+          }
+          const rows = JSON.parse(JSON.stringify(this.rows))
+          if(type == '1') {
+            if(this.focusOn == '0') {
+              return
+            } else {
+              let i = this.focusOn
+              let tmp1 = rows[i]
+              let tmp2 = rows[i-1]
+              rows.splice(i-1,1,tmp1)
+              rows.splice(i,1,tmp2)
+              this.rows = [...rows]
+              this.focusOn = i-1
+            }
+          } else if(type == '2') {
+            if(this.focusOn == this.rows.length) {
+              return
+            } else {
+               let i = this.focusOn
+              let tmp1 = rows[i]
+              let tmp2 = rows[i+1]
+              rows.splice(i,1,tmp2)
+              rows.splice(i+1,1,tmp1)
+              this.rows = [...rows]
+              this.focusOn = i+1
+            }
+          }
+           const items = utils.simpleOptionData(this.rows);
+          this.$emit('pushValues',items);
+        },
         delRow(){
           if(this.focusOn==-1){
             this.$message({