el-table列表内容--更多省略--查看更多与收起实现

实现如下图效果-- 点击查看更多展开全部文字--点击收起收回文字

实现步骤:

1、el-tabel中需要做省略效果的字段处添加如下代码-------ellipsis方法---点击即可查看方法

<el-table-column
   prop="page_content"
   label="知识库内容">
   <template slot-scope="scope">
     // 分三种展示  其中 ellipsis 方法---请移步到我的另一篇文章查看
     <span v-if="scope.row.page_content.length>150&&scope.row.checkMoreFlag">
          {{ scope.row.page_content | ellipsis(150) }}
          <a @click="checkMore(scope.row.id)" href="javascript:void(0)">查看更多</a>
     </span>
     <span v-if="scope.row.page_content.length>150&&!scope.row.checkMoreFlag">
          {{scope.row.page_content}} 
           <a @click="hiddenMore(scope.row.id)" href="javascript:void(0)">收起！</a>
     </span>
     <span v-if="scope.row.page_content.length<=150">{{ scope.row.page_content }}</span>
   </template>
</el-table-column>

2、click方法

method: {
    hiddenMore(id){
        // this.tableData 为列表数据
     this.tableData.forEach(el=>{
      if(el.id===id){
        // 循环标识确认, 我这里用的是id
        return el.checkMoreFlag = true
      }
     })
    },
    checkMore(id){
      this.tableData.forEach(el=>{
        if(el.id===id){
          return el.checkMoreFlag = false
        }
      })
    }
}
     

3、列表数据处理

// 对得到的数据列表每一项添加flag标识--进行展开和收起的区分
data.docs.forEach(el=>{
     return el.checkMoreFlag = true
})
this.tableData = data.docs