今天我秃头了吗 2021-11-11 17:38 采纳率: 50%
浏览 82
已结题

vue如何实现统计个数的绑定?

请问一下。如何将页面表格中某列的数组元素统计个数?

  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2021-11-12 10:03
    关注

    table也是通过数据源生成的,直接统计数据源中的列数据信息后,在显示就好了吧。
    示例如下

    img

    <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>
    
    

    有帮助麻烦点下【采纳该答案】,谢谢~~有其他问题可以继续交流~

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 11月20日
  • 已采纳回答 11月12日
  • 创建了问题 11月11日

悬赏问题

  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
  • ¥15 让node服务器有自动加载文件的功能
  • ¥15 jmeter脚本回放有的是对的有的是错的
  • ¥15 r语言蛋白组学相关问题