el-table中文字过程时隐藏文字设置

• 问题描述：el-table中有时候会存在当前行的某列文字过长导致表格拉伸影响美观。因此需要隐藏过长的文字，点击详情时可以展开所有文字内容，点击收起时会隐藏。
  实现效果如下：
  
  点击详情后效果如下：
  

具体实现过程

方式一：
首先我这里设定的是备注的长度大于30个字符串时才显示收起和详情，这里可以根据自己需求进行修改。

<el-table-column prop="memo" label="备注" align="center" min-width="200px" sortable>
      <template slot-scope="scope">
        <!-- v-if备注大于30个字符串的时候，才显示收起和详情 -->
        <div v-if="scope.row.memo.length > 30">
          <div class="ellipsis" v-text="ellipsisText(scope.row.memo, scope.$index)"></div>
          <span v-show="showDetail[scope.$index]"> {
    
    {
    
     scope.row.memo }} </span>
          <el-link type="primary" @click="toggleDetail(scope.$index)">
            {
    
    {
    
     showDetail[scope.$index] ? '收起' : '详情' }}
          </el-link>
        </div>
        <div v-else>{
    
    {
    
     scope.row.memo }}</div>
      </template>
 </el-table-column>

处理方法

export default {
    
    
  data() {
    
    
    return {
    
    
      showDetail: [] // 控制全部文本显隐状态的数组}
    }
  },
  methods: {
    
    
    //备注文字过长时显示问题
    ellipsisText(text, index) {
    
    
      if (this.showDetail[index]) {
    
    
        return '';
      } else if (text.length > 30) {
    
     // 文本长度大于 30 时，截取前 30 个字符
        return `${
      
      text.slice(0, 30)}...`;
      } else {
    
    
        return text;
      }
    },
    toggleDetail(index) {
    
    
      this.$set(this.showDetail, index, !this.showDetail[index]); // 利用 Vue.set 设置 showDetail 数组中当前行的显隐状态
    },
  }
}

样式

<style lang="scss" scope>
.ellipsis {
    
    
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

方式二：
根据el-table中的show-overflow-tooltip绑定为:show-overflow-tooltip=‘true’。