saber/src/components/WbsTree/ManualSorting.vue

<template>
  <div class="ManualSorting">
    <div
      v-for="(item,key) in sort"
      :key="key"
      class="flexBetween flexItemsC"
      style="width:100%;font-size:16px;height:30px;"
    >
      <div>
        <span>{{key+1}}</span>
        <span class="marleft20">{{item.deptName}}</span>
      </div>
      <div class="flexItemsC">
        <i
          @click="shangshen(key)"
          class="el-icon-top"
          :style="{'font-size':'20px','color':key==0 ?'#aaa':'#0A8CD5', 'cursor': key!=0?'pointer':'default'}"
        ></i>
        <i
          @click="xiajiang(key)"
          class="el-icon-bottom marleft5"
          :style="{'font-size':'20px','color':key==sort.length-1?'#aaa':'#0A8CD5', 'cursor':  key!=sort.length-1?'pointer':'default'}"
        ></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['sort'],
  methods: {
    xiajiang (key) {
      if (key != this.sort.length - 1) {
        let da = this.sort[key]
        this.sort[key] = this.sort[key + 1]
        this.sort[key + 1] = da
        this.$emit('bianhua')
      }
      console.log(this.sort);
    },
    shangshen (key) {
      if (key != 0) {
        let da = this.sort[key]
        this.sort[key] = this.sort[key - 1]
        this.sort[key - 1] = da
        this.$emit('bianhua')
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.ManualSorting {
  width: 100%;
  height: 100%;
}
</style>