vue中实现超出一行 展开和收起的功能

html中：

  <div
                    class="txttype"
                    ref="txttype"
                    style="margin-bottom: 6px"
                    :class="hidetext == true ? 'hidetext' : ''"
                  >
                    <div style="width: 96%">
                      <el-tag
                        type="info"
                        style="margin-right: 10px"
                        v-for="(item, index) of formTempData.userList"
                        :key="index"
                      >
                        {{ item.userName }}
                      </el-tag>
                    </div>
                    <a class="more" v-if="nomore" @click="lookmore"
                      >{{ moretext
                      }}<i
                        :class="
                          hidetext == false
                            ? 'el-icon-arrow-up'
                            : 'el-icon-arrow-down'
                        "
                      ></i
                    ></a>
                  </div>

data中定义变量

data(){
         moretext: "查看更多",
         nomore: false,
         hidetext: false,
         userList: [
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
          { userName: "王赵东" },
          { userName: "江小敏" },
        ],
}

方法中：

  mounted() {
    this.changeHeight();
  },
  methods: {
    changeHeight() {
      //通过ref获取对应dom节点的高度，注意20为单行时的高度
      let height = this.$refs.txttype.clientHeight;
      //当获取的高度大于20时，即当前文本为多行，设置添加收起文本的class，
      //当获取的高度等于20时，隐藏查看更多按钮
      if (height > 34) {
        this.hidetext = true;
        this.nomore = true;
      } else if (height <= 34) {
        this.nomore = false;
      }
    },
      //查看更多
    lookmore() {
      this.hidetext = !this.hidetext;
      this.moretext = this.hidetext == true ? "查看更多" : "收起";
    }
    }

css样式中：

.txttype {
  position: relative;
  .more {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #2878ff;
  }
}
.hidetext {
  height: 34px;
  overflow: hidden;
}

实现效果如下：人员超过一行的时候


人员没有超过一行的时候 不显示下拉和收起效果：