3个以内正常显示超出3个

有一个需求，如果数组中是的数据没有超过3条就用按钮展示如果超过了3条那么就用下拉框来展示，并且还的保证是3个按钮，利用vue的计算属性来实现，废话不多说直接上代码！

// html
<div class="btn-box">
  <el-button v-for="(item, index) in visibleBtns" :key="index" size="mini" :round="true">{{ item.btn }}</el-button>
  <!-- 下拉框 -->
  <el-dropdown v-if="showMore" @command="selectItem">
    <span class="el-dropdown-link">
      {{ dropdownTitlt }}
    <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu class="dropdown" slot="dropdown">
      <el-dropdown-item :command="item.btn" v-for="(item, index) in btnList.slice(2)" :key="index + 2">{{ item.btn }}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</div>

// js
<script>
export default {
  name: 'home-page',
  data () {
    return {
      // 所有的按钮
      btnList: [
        {
          btn: '按钮1'
        },
        {
          btn: '按钮2'
        },
        {
          btn: '按钮3'
        },
        {
          btn: '按钮4'
        },
        {
          btn: '按钮5'
        },
        {
          btn: '按钮6'
        }
      ],
      dropdownTitlt: '下拉菜单'
    }
  },
  computed: {
    showMore () {
      // 如果这个数组的长度大于3的话直接下拉菜单才会显示
      return this.btnList.length > 3
    },
    visibleBtns () {
      // 如果数组中的数据小于或者等于3个了，那么直接展示出来就行，没必要有下拉菜单了
      if (this.btnList.length <= 3) {
        return this.btnList.slice(0, 3)
      } else {
      // 如果数组中的数据大于3个了那么久展示条数据，剩下的展示下拉菜单
        return this.btnList.slice(0, 2)
      }
    },
     // 超过7个显示更多
    processedIcons() {
      if (this.dataDeskArr[0].appSystem.length >= 7) {
        return [...this.dataDeskArr[0].appSystem, {
          icon: 'icon-gengduo1',
          name: '更多',
          content: '/pages/more/more'
        }];
    } else {
        return [...this.dataDeskArr[0].appSystem]
    }
}
  },
  methods: {
    // 下拉菜单选择
    selectItem (val) {
      this.dropdownTitlt = val
    }
  }
}
</script>