前端 表格中一个字段的值显示根据另一个字段的修改

如果需要在表格中动态更新某个单元格的值，可以使用表格库的事件监听机制，监听单元格数据的修改事件，然后根据需要修改相关单元格的值。

以使用 layui 的 table 模块为例，可以使用 `table.on('edit')` 监听表格单元格的编辑事件，然后在事件回调函数中修改需要修改的单元格的值。

示例代码如下：

<table id="demo" lay-filter="test"></table>

layui.use('table', function() {
  var table = layui.table;
  
  // 渲染表格
  table.render({
    elem: '#demo',
    url: '/demo/table/data',
    cols: [[
      {field: 'id', title: 'ID', width: 80},
      {field: 'name', title: '姓名', width: 120},
      {field: 'age', title: '年龄', width: 80},
      {field: 'sex', title: '性别', width: 80},
      {field: 'score', title: '分数', width: 80, edit: 'text'},
      {field: 'grade', title: '年级', width: 80}
    ]],
    page: true
  });
  
  // 监听单元格编辑事件
  table.on('edit(test)', function(obj){
    var value = obj.value; // 修改后的值
    var data = obj.data; // 当前行的数据
    var field = obj.field; // 当前编辑的字段
    if (field === 'score') {
      // 如果修改的是分数，根据分数修改年级
      var grade = value < 60 ? '不及格' : '及格';
      // 修改对应单元格的值
      table.update({
        elem: '#demo',
        data: {
          id: data.id,
          grade: grade
        }
      });
    }
  });
});

上面的代码中，我们在分数这一列添加了编辑功能，当分数被修改后，会触发 `table.on('edit')` 事件回调函数，根据分数的值计算出年级，并使用 `table.update()` 方法修改对应单元格的值。

需要注意的是，不同的表格库可能有不同的事件监听机制，具体可以参考相应的文档。