主要是靠样式的隐藏和显示来控制

<template>
  <div style="border: 1px red solid;width: 50%;position: relative ">
        <div :class="flag ? 'externalDiv': ''" >
          <div style="display: flex;flex-wrap: wrap;padding-right: 40px" ref="insideDiv">
            <section style="display:inline-block;width: 135px;height: 50px;background: #F5F7FA;border-radius: 6px;margin-left: 10px;line-height: 50px;padding-left: 10px;margin-bottom: 10px" v-for="item in 10" :key="item"><span>test</span></section>
          </div>
        </div>
        <span style="position: absolute;right: 0px;top: 0px; cursor: pointer;   height: 50px;color: #1770FF;font-size: 10px;    line-height: 50px;" v-if="width > 60 && flag" @click="flag = !flag">更多<i class="el-icon-arrow-down"></i></span>
        <span style="    position: absolute;    bottom: 0px; cursor: pointer;  right: 0px;color: #1770FF;font-size: 10px" v-if="width > 60 && !flag" @click="flag = !flag">收起<i class="el-icon-arrow-up"></i></span>
  </div>
</template>
 
<script>
 
export default {
  name: "Login",
  components: {
  },
  data() {
    return {
      width: 0,  // 记录一行数据有多高
      flag: true, // 展示样式
    };
  },
  created() {
  },
  mounted() {
    console.log(this.$refs.insideDiv.clientHeight)
    this.$nextTick(() => {
      this.width = this.$refs.insideDiv.clientHeight
    })
    window.onresize = () => (()=> {
      this.width = this.$refs.insideDiv.clientHeight   // 放大或者缩小, 对应的更多、收起是否显示
    })()
  }
};
</script>
 
<style rel="stylesheet/scss" lang="scss">
.externalDiv {
  height: 59px;
  overflow: hidden;
}
</style>

本文转自：vue 点击更多展开功能_xi邮lj的博客-CSDN博客_vue展开更多