zoukankan      html  css  js  c++  java
  • vue原生table表格,输入数值求和

    实现的是用vue项目实现原生的table求一列的数值总和,其中数值是后期通过input输入的

    效果看这里

    这里要说的是 每个人的英语分数总和,因为英语是后期输入的, 不是数据库返回的,所以这边有点麻烦.
    这里写的两种方法实现, 一种是方法methods, 一种就是计算属性computed

    html代码

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script> -->
    <div id="app">
        <template>
            <table border>
                <thead>
                    <tr>
                        <td>ID</td>
                        <td>名称</td>
                        <td>数学</td>
                        <td>物理</td>
                        <td>英语手动打分</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in tableData6" :key="index">
                        <th>{{item.id}}</th>
                        <th>{{item.name}}</th>
                        <th>{{item.amount1}}</th>
                        <th>{{item.amount2}}</th>
                        <th>
                            <div>
                                <input type="text" placeholder='打分啊' v-model="item.amount4">
                                <!-- <input type="text" placeholder='打分啊' v-model="item.amount4" @change="blurInput(index)"> -->
                            </div>
                        </th>
                    </tr>
                    <tr>
                        <th>总计</th>
                        <th>N/A</th>
                        <th>{{sumAmount}}</th>
                        <th>{{sumMoney}}</th>
                        <th>
                            {{sunCount}}
                        </th>
                    </tr>
                </tbody>
            </table>
        </template>
    </div>
    

    没放样式代码了, 这里只实现功能

    js代码

    <script>
    var Main = {
        data() {
            return {
    
                tableData6: [{
                    id: '12987122',
                    name: '王小虎111',
                    amount1: '234',
                    amount2: '3.2',
                    amount3: 10,
                    amount4: ''
                }, {
                    id: '12987123',
                    name: '王小虎222',
                    amount1: '165',
                    amount2: '4.43',
                    amount3: 12,
                    amount4: ''
                }, {
                    id: '12987124',
                    name: '王小虎333',
                    amount1: '324',
                    amount2: '1.9',
                    amount3: 9,
                    amount4: ''
                }, {
                    id: '12987125',
                    name: '王小虎444',
                    amount1: '621',
                    amount2: '2.2',
                    amount3: 17,
                    amount4: ''
                }, {
                    id: '12987126',
                    name: '王小虎555',
                    amount1: '539',
                    amount2: '4.1',
                    amount3: 15,
                    amount4: ''
                }],
            };
        },
        computed: {
            sumAmount() {
                return this.tableData6.map(row => row.amount1).reduce((acc, cur) => (parseInt(cur) + acc), 0)
            },
            sumMoney() {
                return this.tableData6.map(row => row.amount2).reduce((acc, cur) => (parseFloat(cur) + acc), 0)
            },
            // 方法一:计算属性
            sunCount() {
                console.log('this.tableData6.map(row => row.amount4)', this.tableData6.map(row => row.amount4))
                var bb = [];
                for(var i in this.tableData6.map(row => row.amount4)){
                    if(this.tableData6.map(row => row.amount4)[i]) {
                        bb.push(this.tableData6.map(row => row.amount4)[i])
                    }
                }
                return bb.reduce((acc, cur) => (parseFloat(cur) + acc), 0)
                // return this.tableData6.map(row => row.amount4).reduce((acc, cur) => (parseFloat(cur) + acc), 0)    
                // let num = 0
                // for( let i = 0 ; i < this.tableData6.length ; i++) {
                //     num += Number(this.tableData6[i].amount4)
                // }
                // return num
            }
        },
        methods: {
            // 方法二: 通过change事件实现
            // blurInput(index) {
            //     console.log('index', this.tableData6)
            //     let num = 0;
            //     this.tableData6[index].amount4 = number
            //     for( let i = 0 ; i < this.tableData6.length ; i++) {
            //         num += Number(this.tableData6[i].amount4)
            //     }
    
            //     this.englishAllNum = num
            // },
        }
    };
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
    </script>
    
  • 相关阅读:
    集群任务管理系统SGE的简明教程
    三代全长转录组测序和组装
    quota
    基因组转座元件
    单倍体
    什么是寒武纪、志留纪、泥盆纪、白垩纪
    对组装之后的三代基因组进行polish
    使用 PhyML 构建进化树
    PAML软件中的mcmctree命令估算物种分歧时间
    OrthoMCL及orthofinder 两种软件进行聚类分析
  • 原文地址:https://www.cnblogs.com/lxk0301/p/10161359.html
Copyright © 2011-2022 走看看