效果图：

要点是：将需要文本内容溢出显示省略号的模块组件话，然后在页面渲染后进行计算

父组件：

<template>
  <div class="list">
    ... // 文本处理组件化
  	<ellipsis-Text :group_item="item" />
  </div>
</template>

子组件：

<template>
   <div class="bottom">
    <div :id="`room_id_${group_item.room_id}`" :class="textOver && !foldBtn ? 'room_intro showEllipsis' : 'room_intro'">
      {{ group_item.room_intro }}
    </div>
    <span class="btnWrap" v-if="textOver" @click="foldBtn = !foldBtn">
      <img v-if="foldBtn" class="arrow_icon" src="@/assets/images/arrow_up.png" alt="" />
      <img v-else class="arrow_icon"  src="@/assets/images/arrow_down.png" alt="" />
    </span>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, nextTick, onBeforeMount } from 'vue'
export default defineComponent({
  name: '',
  props: {
    group_item: {
      type: Object,
      required: true
    },
  },
  setup(props) {
    const state = reactive({
      textOver: false, // 超过2行
      foldBtn: false // 按钮默认显示缩起
    })

    onBeforeMount(async () => {
      nextTick(() => {
        const domRef =  document.getElementById(`room_id_${props.group_item.room_id}`)
        if (domRef) {
          const height = window.getComputedStyle(domRef).height.replace("px", "")
          if (+height > 40) { // 40 -- 2行的高度
            state.textOver= true;
          } else {
            state.textOver= false;
          }
        }
      })
    })

    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="less" scoped>
.bottom {
  margin-top: 12px;
  position: relative;
  .Flex();
  .room_intro {
    flex:1;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    text-align: justify;
    opacity: 0.4;
  }
  .showEllipsis{ // 文本溢出超出两行显示省略号
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .btnWrap {
    align-self: flex-end;
    cursor: pointer;
    .arrow_icon {
      width: 16px;
      height: 16px;
    }
  }
}
</style>