根据复选框隐藏/显示表格行 [英] Hide/show table rows based on checkbox
问题描述
我有一些复选框,我想用它们来显示/隐藏表格中的行,这些行的内容与选中的复选框的值相匹配.
复选框:
foo1 <input type='checkbox' name='foo2' value='foo2' v-model="selectedType"/>foo2 <input type='checkbox' name='bar1' value='bar1' v-model="selectedType"/>bar1
我有一个对象,我曾经使用 v-for 构造一个表:
<template v-for="sampleObj 中的sampleItem"><tr><td>{{sampleItem.item}}</td><td>{{sampleItem.description}}</td></tr></模板>
JS:
new Vue({数据: {所选类型:[],sampleObj = [{'item': 'item1', 'description': 'foo1 blah'},{'item': 'item2', 'description': 'foo2 vlah'},{'item':'item3','描述':'bar1 nlah'},{'item': 'item4', 'description': 'bar2 clah'},];}});
默认情况下,复选框未选中.因此,只有具有描述为bar2"的单元格的行最初是可见的.然后当我切换其他复选框时,其他行也应该变得可见(描述与复选框值不匹配,但后面有几个词.我可以在这里做一些字符串处理).
我想我可以在标签中使用 v-if 指令来查看 selectedType 的值,但我不确定如何实现这一点.
伪代码:
......</tr>我怎么能做到这一点?
解决方案 v-if
实际上你有两个条件:如果没有与描述匹配的复选框,你想要的行显示;如果有复选框,则必须选中它.
我将复选框值放入它们所属的数据中.我做了一个测试方法.它首先查看描述是否与任何复选框值匹配,然后检查是否选择了匹配的值.
new Vue({el: '#app',数据: {所选类型:[],样本对象:[{'项目':'项目1','描述':'foo1 等等'},{'项目':'项目2','描述':'foo2 vlah'},{'项目':'项目3','描述':'bar1 nlah'},{'项目':'项目4','描述':'bar2 clah'},],cbValues: ['foo1', 'foo2', 'bar1']},方法: {isVisible(行){constmatchedValue = this.cbValues.find(v => row.description.indexOf(v) >= 0);如果(!匹配值){返回真;}返回 this.selectedType.includes(matchedValue);}}});
td {边框:薄纯黑色;}
<script src="//unpkg.com/vue@latest/dist/vue.js"></script><div id="应用程序"><div v-for="cbValues 中的 val"><标签><input type='checkbox' :value='val' v-model="selectedType">{{val}}标签>
<表格><template v-for="sampleObj 中的sampleItem"><tr v-if="isVisible(sampleItem)"><td>{{sampleItem.item}}</td><td>{{sampleItem.description}}</td></tr></模板>
I have some checkboxes which I'd like to use to show/hide rows in a table whose contents match the values of the checkbox which is selected.
Checkboxes:
<input type='checkbox' name='foo1' value='foo1' v-model="selectedType"/> foo1
<input type='checkbox' name='foo2' value='foo2' v-model="selectedType"/> foo2
<input type='checkbox' name='bar1' value='bar1' v-model="selectedType"/> bar1
I have an object which I used to construct a table using v-for:
<table>
<template v-for="sampleItem in sampleObj">
<tr>
<td>{{sampleItem.item}}</td>
<td>{{sampleItem.description}}</td>
</tr>
</template>
</table>
JS:
new Vue({
data: {
selectedType: [],
sampleObj = [{'item': 'item1', 'description': 'foo1 blah'},
{'item': 'item2', 'description': 'foo2 vlah'},
{'item': 'item3', 'description': 'bar1 nlah'},
{'item': 'item4', 'description': 'bar2 clah'},
];
}
});
By default, the checkboxes are unchecked. So, only the row which has a cell with description 'bar2' is initially visible. Then when I toggle the other checkboxes, the other rows should also become visible (the descriptions don't match the checkbox values verbatim but has a few words following it. I can do some string processing here).
I thought I could use the v-if directive in the tag to look at value of selectedType, but I am not sure how I can accomplish this.
Pseudo-code:
<tr v-if="selectedType ~= /sampleItem.description/">
...
...
</tr>
How could I accomplish this?
解决方案 You actually have two conditions you need for the v-if
: if there is no checkbox matching the description, you want the row to display; if there is a checkbox, it has to be checked.
I put the checkbox values into data, where they belong. I made a method for the test. It first looks to see whether the description matches any checkbox value, then it checks whether the matched value is selected.
new Vue({
el: '#app',
data: {
selectedType: [],
sampleObj: [{
'item': 'item1',
'description': 'foo1 blah'
},
{
'item': 'item2',
'description': 'foo2 vlah'
},
{
'item': 'item3',
'description': 'bar1 nlah'
},
{
'item': 'item4',
'description': 'bar2 clah'
},
],
cbValues: ['foo1', 'foo2', 'bar1']
},
methods: {
isVisible(row) {
const matchedValue = this.cbValues.find(v => row.description.indexOf(v) >= 0);
if (!matchedValue) {
return true;
}
return this.selectedType.includes(matchedValue);
}
}
});
td {
border: thin solid black;
}
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<div v-for="val in cbValues">
<label>
<input type='checkbox' :value='val' v-model="selectedType">
{{val}}
</label>
</div>
<table>
<template v-for="sampleItem in sampleObj">
<tr v-if="isVisible(sampleItem)">
<td>{{sampleItem.item}}</td>
<td>{{sampleItem.description}}</td>
</tr>
</template>
</table>
</div>
这篇关于根据复选框隐藏/显示表格行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆