vue前端通过判断一个值,更新另一个值的结果

最新推荐文章于 2024-09-13 10:34:12 发布

原创最新推荐文章于 2024-09-13 10:34:12 发布 · 489 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

MonicaTeaCat 专栏收录该内容

24 篇文章

订阅专栏

这篇文章描述了一个前端表格的实现，其中包含一个用于判断的列。如果所有行的判断结果为合格，则整体结果字段更新为通过；否则，设置为不通过。这个功能是通过监听el-select组件的change事件和使用Array.prototype.every方法来检查所有行的状态来实现的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

比如我这里是根据判断的结果:

如果有一个不合格,结果就是不通过,

前端列表展示的代码

 <el-table-column label="判断" prop="judgment">
                        <template slot-scope="{ row }">
                          <el-select v-model="row.judgment" placeholder="请选择"  @change="updateJudgment(tableData111)">
                            <el-option label="/" value="/"/>
                            <el-option label="合格" value="合格"/>
                            <el-option label="不合格" value="不合格"/>
                          </el-select>
                        </template>
                      </el-table-column>

通过对该列表所有行的判断的结果,对我们的"结果"字段进行更新

下面是方法的代码:

   //根据判断自动选择实验结果
         updateJudgment(tableData) {
        const judgments = tableData.tableData.map((r) => r.judgment);
        if (judgments.every((j) => j === "合格")) {
            tableData.result = "通过";
        } else {
            tableData.result = "不通过";
        }},

如方法所示,如果"判断"全为"合格","结果"为"通过",

否则"结果"就是"不通过".