首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在单击“阅读更多”链接时截断并显示或隐藏链接文本

在单击“阅读更多”链接时截断并显示或隐藏链接文本
EN

Stack Overflow用户
提问于 2018-10-10 03:56:17
回答 2查看 6K关注 0票数 -1

我想隐藏的文本,如果超过300个字符的限制,并显示link,如果点击链接,然后显示完整的内容。

html:

 <tr v-for="(row,index) in datasource">
                            <td v-for="column in gridSchema.grid.columns" class="wrap-break-word" v-show="column.isVisible">  

<span v-if="row[column.headername].length >= 300  && toggle == false" v-html="$options.filters.limitTo(row[column.headername])">
                                    </span><a v-on:click="toggleFlag()" v-show="!row['isEditable'] && row[column.headername].length >= 300  && toggle == false" >Read more</a>
                                    <span v-if="(row[column.headername].length < 300  || toggle == true)" v-html="row[column.headername]">
                                    </span>

<td>
</tr>

js:

  data: {
                ..
                    toggle: false,
datasource:
[
      {
        "id": 0,
        "name": "Christa Hansen",
        "informations": "Unpleasant astonished an diminution up partiality. Noisy an their of meant. Death means up civil do an offer wound of. Called square an in afraid direct. Resolution diminution conviction so mr at unpleasing simplicity no. No it as breakfast up conveying earnestly immediate principle. Him son disposed produced humoured overcame she bachelor improved. Studied however out wishing but inhabit fortune windows. "
        "biliography":"Remember outweigh do he desirous no cheerful. Do of doors water ye guest. We if prosperous comparison middletons at. Park we in lose like at no."
     },
      {
        "id": 1,
        "name": "Mckenzie Fuller",
        "informations":"Did shy say mention enabled through elderly improve."
        "biliography":" It ye greatest removing concerns an overcame appetite. Manner result square father boy behind its his. Their above spoke match ye mr right oh as first. Be my depending to believing perfectly concealed household. Point could to built no hours smile sense. "
      },
      {
        "id": 2,
        "name": "Oneal Clark",
        "informations": "-",
        "biliography":"-"

      }
    ]
               ..
            }
    methods:{

    toggleFlag: function () {
                    console.log('within toggleflag final');
                    this.toggle = !this.toggle;
                }

    },
     filters: {
                limitTo: function (value) {
                    if (!value) return '';
                    return value.substring(0, 300 )+ '...';
                }

编辑:上面的代码可以工作,但当点击“阅读更多”时,它将应用于表格的所有列,无论它显示链接的位置。

示例:表格行的col1、col5超过了300个字符,并显示了“阅读更多”链接。当单击COL1的“阅读更多”链接时,它也适用于col5,并且该列的文本在所有行中都会展开。它应该应用于特定行和特定单元格。

添加了数据源对象。我添加了静态数据源,但它是动态的,并且随着列数的不同而不同。

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52728426

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档