请问一下。如何将页面表格中某列的数组元素统计个数?
4条回答 默认 最新
- CSDN专家-showbo 2021-11-12 10:03关注
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>
有帮助麻烦点下【采纳该答案】,谢谢~~有其他问题可以继续交流~
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用 2
悬赏问题
- ¥15 Stata链式中介效应代码修改
- ¥15 latex投稿显示click download
- ¥15 请问读取环境变量文件失败是什么原因?
- ¥15 在若依框架下实现人脸识别
- ¥15 添加组件无法加载页面,某块加载卡住
- ¥15 网络科学导论,网络控制
- ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比,为什么Snetinel-2计算的结果最小值特别小,而Lansat8就很平均
- ¥15 metadata提取的PDF元数据,如何转换为一个Excel
- ¥15 关于arduino编程toCharArray()函数的使用
- ¥100 vc++混合CEF采用CLR方式编译报错