在tabel表格中超出隐藏内容并展示展开收起

直接上代码  进行组件封装

<template>
  <div>
    <div v-if="valueType==1" style="position: relative;">
      <div :class="{'tdboxs':true, 'tdboxx': type1  }" ref="tdbox" :style="{maxHeight: type1 ? '' : '-webkit-box'}">
        <div class="tds" ref="tds" v-html="value ? value : '-'">
        </div>
        <i 
          v-show="type && type1"
          @click="type1=!type1" 
          :style="{transform: type1 ? 'rotate(90deg)' : 'rotate(270deg)', transition:'.1s'}" 
          class="el-icon-d-arrow-right cursor showtype">
        </i>
      </div>
      <span :class="[type1 ? 'zk1' : 'zk2']" v-show="type &&!type1">
        <i 
          @click="type1=!type1" 
          :style="{transform: type1 ? 'rotate(180deg)' : 'rotate(270deg)', transition:'.1s'}" 
          class="el-icon-d-arrow-right cursor showtype">
        </i>
        </span>
    </div>
    <div v-else style="position: relative;">
      <div class="tdbox" ref="tdbox" :style="{display: type1 ? '' : '-webkit-box'}">
        <div class="tds" ref="tds" v-html="value ? value : '-'">
        </div>
        <i 
          v-show="type && type1"
          @click="type1=!type1" 
          :style="{transform: type1 ? 'rotate(90deg)' : 'rotate(270deg)', transition:'.1s'}" 
          class="el-icon-d-arrow-right cursor showtype">
        </i>
      </div>
      <span :class="[type1 ? 'zk1' : 'zk2']" v-show="type &&!type1">
        <i 
          @click="type1=!type1" 
          :style="{transform: type1 ? 'rotate(180deg)' : 'rotate(270deg)', transition:'.1s'}" 
          class="el-icon-d-arrow-right cursor showtype">
        </i>
        </span>
    </div>
  </div>
</template>

<script>
export default {
  props:["value",'valueType'],
  data () {
    return {
      type: false,
      type1: false,
    }
  },
  mounted () {
    this.$nextTick(() =>{
      if(this.value && this.valueType == 1){
        let tdbox = this.$refs.tdbox.offsetHeight ? this.$refs.tdbox.offsetHeight : 0
        let tds = this.$refs.tds.offsetHeight ? this.$refs.tds.offsetHeight : 0
        this.type = tds > tdbox ? true : false
      } else {
        let tdbox = this.$refs.tdbox.offsetHeight ? this.$refs.tdbox.offsetHeight : 0
        let tds = this.$refs.tds.offsetHeight ? this.$refs.tds.offsetHeight : 0
        this.type = tds >= tdbox ? true : false
      }
    });
  },
}
</script>

<style scoped lang="less">
  .tdbox{
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    .tds {
      height: 100%;
      display: inline;
    }
  }
  .tdboxs{
    max-height: 70px;
    overflow: hidden;
    .tds {
      height: 100%;
    }
  }
  .tdboxx{
    max-height: 100%;
    // overflow: hidden;
    .tds {
      height: 100%;
    }
  }
  .showtype {
    font-size: 16px;
    color: #006CE3;
  }
  .zk2 {
    display: inline-block;
    background: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .zk2::before  {
    content: '...';
    margin-right: 3px;
    animation: blink 1s infinite
  }
</style>

使用方法先进行引入注册为组件名为<tds></tds>  可接受value与valueType两种参数  如value值为inline文本类型可不传, 如果为html格式则为 '1'  可适当修改代码进行适配多行问题

<table class="table_two1" v-if="arr.length > 1">
                  <!-- <tbody > -->
                    <tr v-for="(item,index) in arr" :key="index">
                      <template v-if="index ==0">
                        <th v-for="(items,indexs) in item" :key="indexs" v-html="items ? items: ''"></th>
                      </template>
                      <template v-if="index>0">
                        <td v-for="(items,indexs) in item" :key="indexs" >
                          <tds :value="items"></tds>
                        </td>
                      </template>
                    </tr>
                  <!-- </tbody> -->
                </table>