设置文本内容超过三行...展示，并且显示展开按钮，点击展开可对文章进行展开收起操作

首先设置文本内容超过3行隐藏，并且用…表示

 .closeShowHeightStyle {
    overflow: hidden;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

对是否显示展开按钮的主要逻辑：用当前文本内容只展示3行的高度，和文本实际整体高度进行对比

//通过在标签上添加ref属性，获取当前dom节点的高度和一些属性值

               <span
               class="openStyle"
               v-show="!scope.row[index].openShowHeight">展开 <i class="el-icon-arrow-right"> </i>
               </span>
              <span
                class="openStyle"
                v-show="scope.row[index].openShowHeight">收起 <i class="el-icon-arrow-left"> </i>
                </span>
         <div
         ref="detailDom"
         v-html="keyWordsHigh(item.value)"
         v-if="item.name == 'PINS_LOG'"
         :class="
           scope.row[index].openShowHeight
            ? 'openShowHeightStyle'
            : 'closeShowHeightStyle'
            "
           >
           </div>

          this.$nextTick(function () {
            const refDom = this.$refs["detailDom"] as any;
            //获取当前列表每一项的dom节点上的所有属性值
            const item = refDom[i];
            const oneHeight = item.scrollHeight || 23;//为文本的整体高度
            //item.offsetHeight 当前显示的文本高度
            //如果文本的整体高度大于当前显示的文本高度高度，证明文本被隐藏了，需要显示展开按钮
            if (oneHeight > item.offsetHeight) {
              for (let q = 0; q < newList.length; q++) {
                const needShowExpandeVal = newList[q]; //处理过的key，value的键值对的对象
                //找到需要添加展开按钮的那一列进行设置
                if (needShowExpandeVal.name == "PINS_LOG") {
                  needShowExpandeVal.needShowExpande = true; //需要显示展开收起按钮标识
                }
              }
            }
          });