前端 用户输入3个值,自动计算其平均值,标准偏差,和cv%

计算如果在后端进行,也会使代码变得臃肿,因此在前端vue文件里,写了这样一个方法,适合于用户输入三个值直接计算其平均值,标准偏差,cv%,赋值给相应的字段,之后可以将其传输到后端.

1. 在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)方法进行格式化处理，结果会自动转换为字符串类型，不过也可能会导致后续使用时出现问题。