计算如果在后端进行,也会使代码变得臃肿,因此在前端vue文件里,写了这样一个方法,适合于用户输入三个值直接计算其平均值,标准偏差,cv%,赋值给相应的字段,之后可以将其传输到后端.
- 在el-table中使用v-for指令遍历tableData数组,动态生成表格行。在el-table-column中分别使用v-model指令将每个输入框和对应的数据进行双向绑定。
<el-table :data="tableData" style="width: 100%">
<el-table-column label="value1" prop="value1">
<template slot-scope="{ row }">
<el-input v-model.lazy="row.value1" @change="calculate(row)" placeholder="请输入value1"></el-input>
</template>
</el-table-column>
<el-table-column label="value2" prop="value2">
<template slot-scope="{ row }">
<el-input v-model.lazy="row.value2" @change="calculate(row)" placeholder="请输入value2"></el-input>
</template>
</el-table-column>
<el-table-column label="value3" prop="value3">
<template slot-scope="{ row }">
<el-input v-model.lazy="row.value3" @change="calculate(row)" placeholder="请输入value3"></el-input>
</template>
</el-table-column>
<el-table-column label="平均值" prop="average">
<template slot-scope="{ row }">
<el-input :value="row.average" placeholder="平均值" readonly></el-input>
</template>
</el-table-column>
<el-table-column label="标准偏差" prop="sd">
<template slot-scope="{ row }">
<el-input :value="row.sd" placeholder="标准偏差" readonly></el-input>
</template>
</el-table-column>
<el-table-column label="CV%" prop="cv">
<template slot-scope="{ row }">
<el-input :value="row.cv" placeholder="CV%" readonly></el-input>
</template>
</el-table-column>
</el-table>
2.定义一个calculate方法,当某个输入框的值改变时调用,该方法用来重新计算每个数据行的平均值、标准偏差和CV%。
methods: {
calculate(row) {
const { value1, value2, value3 } = row;
let sum = 0;
[value1, value2, value3].forEach(val => {
if (val !== '') {
sum += parseFloat(val);
}
});
const n = [value1, value2, value3].filter(val => val !== '').length;
const average = sum / n || 0;
const sd = Math.sqrt([value1, value2, value3].reduce((prev, val) => {
if (val !== '') {
return prev + Math.pow(parseFloat(val) - average, 2);
} else {
return prev;
}
}, 0) / (n - 1)) || 0;
const cv = ((sd / average) * 100).toFixed(2) || 0;
row.average = average.toFixed(2);
row.sd = sd.toFixed(2);
row.cv = cv;
}
}
最后将v-model.lazy放在输入框上,这样可以在用户编辑完输入框并失去焦点时再进行计算和数据更新。
<el-input v-model.lazy="row.value1" @change="calculate(row)" placeholder="请输入value1"></el-input>
在计算标准偏差时,应该使用无偏估计的方法,即将方差除以样本的自由度n-1
。而在这个方法中,标准偏差使用了样本的总体大小n
来进行计算,这可能会导致结果略有偏大。
另外,在计算CV%时,应该将结果乘以100来得到百分数表示,而这个方法中使用了toFixed(2)
方法进行格式化处理,结果会自动转换为字符串类型,不过也可能会导致后续使用时出现问题。