如果限制超过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 )+ '...';
}
edit：上面的代码有效，但是当单击“ Read More”时，它将应用于表中显示链接的所有列。
示例：表行的col1，col5超过了300个字符，并显示“更多”链接。当单击col1的“阅读更多”链接时，它也适用于col5，并且所有行的列文本均展开。 它应适用于特定的行和特定的单元格。
添加了数据源对象。我添加了静态数据源，但它是动态的，并且随列数的变化而变化。
答案 0 :(得分：2)
使用 v-if
v-if="obj.informations.length > 300"
示例：
<div v-if="summary">
{{ obj.informations | linitToDisplay(300) }}
<a v-if="obj.informations.length > 300" @click="summary = false">Read more<a>
<div v-else>
{{ obj.informations }}
</div>
但是您可能会编写toggleSummary（）方法而不是内联summary = false处理程序，并且可能使用对摘要做出反应的计算属性，而不是过滤器。
答案 1 :(得分：2)
您可以使用computed属性来处理这种情况，当您单击链接时，将显示整个链接文本：
编辑
我建议以下解决方案，该解决方案是通过更改datasource和修改mounted钩中的每个单元格而构建的，"id":0将是"id":{txt:0,toggled:true}，"informations":"..."将为"informations":{txt:"...",toggled:false}，依此类推。并且当您单击某个单元格时，您只会将其toggled属性修改为false
// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
toggle: false,
link: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum augue eros, varius in massa vitae, ultrices fringilla eros',
showAll: false,
columns: ["id", "name", "informations", "biliography"],
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": "some info",
"biliography": "some info"
}
]
}
},
computed: {
trunc_link() {
return this.link.substring(0, 30)
}
},
methods: {
toggleFlag: function(index, column) {
this.datasource[index][column].toggled = true;
},
limitTo: function(value) {
if (!value) return '';
return value.substring(0, 50) + '...';
}
},
mounted() {
let d = [];
d = this.datasource.map(item => {
let o = {
"id": {
txt: item.id,
toggled: true
},
"name": {
txt: item.name,
toggled: true
},
"informations": {
txt: item.informations,
toggled: false
},
"biliography": {
txt: item.biliography,
toggled: false
},
}
return o;
});
this.datasource = d;
//console.log(this.datasource)
}
});.readmore {
color: #005faa!important;
cursor: pointer;
}<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<a href="#" v-if="!showAll" @click="showAll=true"> {{trunc_link}}...</a>
<a href="#" v-else> {{link}}</a>
<table class="table-striped">
<tbody>
<tr v-for="(row,index) in datasource">
<td v-for="column in columns" class="wrap-break-word" v-show="true">
<span v-if="row[column].txt.length >= 50 && row[column].toggled == false" v-html="limitTo(row[column].txt)">
</span><a class="readmore" v-on:click="toggleFlag(index,column)" v-show="!row['isEditable'] && row[column].txt.length >= 50 && row[column].toggled == false">Read more</a>
<span v-if="(row[column].txt.length < 50 || row[column].toggled == true)" v-html="row[column].txt">
</span>
<td>
</tr>
</tbody>
</table>
</div>