请问一下。如何将页面表格中某列的数组元素统计个数?
table也是通过数据源生成的,直接统计数据源中的列数据信息后,在显示就好了吧。
示例如下
<div id="app">
<table border="1">
<tr><th>ID</th><th>类型</th><th>名称</th></tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.type}}</td>
<td>{{item.name}}</td>
</tr>
<tr>
<td colspan="3">
统计: <div v-for="(value,key) in summary">{{key}}数量:{{value}}</div>
</td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
summary: {},//统计信息
list: [
{ id: 1, type: '类型3', name: '名称1' },
{ id: 2, type: '类型1', name: '名称2' },
{ id: 3, type: '类型2', name: '名称3' },
{ id: 4, type: '类型2', name: '名称4' },
{ id: 5, type: '类型2', name: '名称5' },
{ id: 6, type: '类型3', name: '名称6' },
{ id: 7, type: '类型1', name: '名称7' }
]
},
mounted() {
var kv = {};
this.list.forEach(item => {
kv[item.type] = (kv[item.type] || 0) + 1;
});
this.summary = kv;
console.log(kv)
}
})
</script>
有帮助麻烦点下【采纳该答案】,谢谢~~有其他问题可以继续交流~
直接统计数组元素的值即可,2边数据是同步的。
没懂你想说啥,什么叫某列的数组元素统计个数?是某列要展示一个数组的长度么?
建议你用elementUI,有表格合计功能
https://element.eleme.cn/#/zh-CN/component/table