如何截取任务字符串并显示最后3项以避免表格布局错乱

Vue前端表格展示Presupuesto对象列表时，实体的Tareas属性拼接的任务链过长，导致表格布局破裂、美观性下降。当前返回数据示例为data:[{tasks:"task 1 task 2 task 3 task 4"}]，需求为截取该字符串，仅显示最后3个任务，保证表格布局正常。

相关代码 #

前端Vue模板代码 #

<tr
  v-for="item in presupuestos"
  :key="item.id"
  :style="item.id === presupuestoSeleccionado.id && TheStyle"
>
  <td>{{ item.tipoPresupuestoString }}</td>
  <td>{{ item.numero }}</td>
  <td>{{ item.cliente.nombre }}</td>
  <td>{{ formatDate(item.fechaEntrega) }}</td>
  <td>{{ item.presupuestoComentarioString }}</td>
  <td>{{ item.tareas }}</td>
</tr>

前端获取数据方法 #

getList() {
  const tipoPresupuesto = this.tipoPresupuesto != null ? this.tipoPresupuesto : "";
  const clienteId = this.cliente != null ? this.cliente.id : "";
  const procesoId = this.proceso != null ? this.proceso : "";
  const tareaId = this.tareaFiltro != null ? this.tareaFiltro : "";

  Swal.fire({
    title: "Espere unos momentos ...",
    showConfirmButton: false,
  });
  this.presupuestoServices
    .getListSupervisar(tipoPresupuesto, clienteId, procesoId, tareaId)
    .then((data) => {
      Swal.close();
      this.presupuestos = data;
      console.log(data)
      this.$data.TheStyle.backgroundColor = "#c3bbbb"; //Para seleccionar los row de algun color
    })
    .catch((error) => {
      Swal.close();
      this.showError(error.response.data);
    });
},

后端C#接口代码 #

[HttpGet("getListSupervisar")]
public async Task<ActionResult<List<Presupuesto>>> GetListSupervisar(
    [FromQuery] int? tipoPresupuesto, 
    [FromQuery] int? clienteId, 
    [FromQuery] int? procesoId, 
    [FromQuery] int? tareaId)
{
    string[] _include = { 
        nameof(Presupuesto.Usuario), 
        nameof(Presupuesto.Cliente), 
        nameof(Presupuesto.PresupuestoDetalle) + "." + nameof(PresupuestoDetalle.PresupuestoDetalleProceso),
        nameof(Presupuesto.PresupuestoDetalle) + "." + nameof(PresupuestoDetalle.ArticuloBp),
        nameof(Presupuesto.PresupuestoDetalle) + "." + nameof(PresupuestoDetalle.ArticuloCamara),
        nameof(Presupuesto.PresupuestoTarea),
        nameof(Presupuesto.PresupuestoComentario)
    };
    var result = await _presupuestoServices.GetListAsync(a => a.Id > 0
                                                        && a.TipoPresupuesto!=null
                                                        && ((tipoPresupuesto == null && a.TipoPresupuesto != (int)Enumeraciones.PresupuestoTipo.Presupuesto) || a.TipoPresupuesto == tipoPresupuesto)
                                                        && (tareaId == null || a.PresupuestoTarea.Where(b => b.TareaId == tareaId).Count() > 0)
                                                        && (procesoId == null || a.PresupuestoDetalle.Where(b => b.PresupuestoDetalleProceso.Where(c => c.ProcesoId == procesoId && c.Cantidad < b.Cantidad).Count() > 0).Count() > 0)
                                                        && (clienteId == null || a.ClienteId == clienteId)
                                                        && a.PresupuestoDetalle.Count > 0
                                                        , _include);

    foreach (var presupuesto in result.ToList())
    {
        presupuesto.Procesos = ArmarProcesosFaltantes(presupuesto);
        presupuesto.PresupuestoComentarioString = presupuesto.PresupuestoComentario.Count>0 ? presupuesto.PresupuestoComentario.LastOrDefault().Comentario : "";

        if (presupuesto.ImporteEnvio>0) 
        {
            presupuesto.PresupuestoDetalle.Add(new PresupuestoDetalle() { Descripcion = "Envio", Cantidad = 1, Ancho = 1, Alto = 1,Presupuesto = presupuesto });
        }
        if (presupuesto.ImporteDescuento > 0) 
        {
            var descuentoPorcen = (presupuesto.DescuentoExtraPorcen + presupuesto.Cliente.Descuento)/100;
            presupuesto.PresupuestoDetalle.Add(new PresupuestoDetalle() { Descripcion = "Descuento", Cantidad = 1, Ancho = descuentoPorcen, Alto = descuentoPorcen, Presupuesto = presupuesto });
        }
        if (presupuesto.ImporteColocacion > 0)
        {
            presupuesto.PresupuestoDetalle.Add(new PresupuestoDetalle() { Descripcion = "Colocacion", Cantidad = 1, Ancho = 1, Alto = 1, Presupuesto = presupuesto });
        }
    }

    return result;
 }

Presupuesto实体类代码 #

public string Tareas
{
    get
    {
        var result = "";
        foreach (var item in PresupuestoTarea.OrderBy(a=>a.FechaAlta))
        {
            result = item.Descripcion + " " + result;
        }
        return result;
    }
}
[NotMapped]

提供两种实现方案，可根据实际场景选择：

方案一：前端Vue处理 #

无需修改后端，直接在前端对任务字符串进行截取处理。

方法1：封装工具函数（推荐，易维护） #

在Vue组件的methods中添加处理函数：

getLastThreeTasks(tasksStr) {
  if (!tasksStr) return '';
  // 拆分字符串并过滤空内容（避免首尾空格导致的空元素）
  const taskArray = tasksStr.trim().split(' ').filter(task => task.length > 0);
  // 截取最后3个任务并拼接
  return taskArray.slice(-3).join(' ');
}

然后修改模板中的任务列：

<td>{{ getLastThreeTasks(item.tareas) }}</td>

方法2：模板内直接处理（简洁，适合简单场景） #

直接在模板中嵌入处理逻辑：

<td>{{ item.tareas?.trim().split(' ').filter(t => t).slice(-3).join(' ') || '' }}</td>

方案二：后端C#处理 #

修改实体类的Tareas属性，直接在后端生成仅包含最后3个任务的字符串，减少前端处理逻辑。

修改实体类的Tareas getter：

[NotMapped]
public string Tareas
{
    get
    {
        // 按创建时间排序后取最后3个任务
        var lastThreeTasks = PresupuestoTarea.OrderBy(a => a.FechaAlta).TakeLast(3);
        // 拼接任务描述（保持原有倒序拼接逻辑）
        return string.Join(" ", lastThreeTasks.Select(item => item.Descripcion).Reverse()).Trim();
    }
}

或者用循环实现（和原有逻辑一致）：

[NotMapped]
public string Tareas
{
    get
    {
        var result = "";
        // 取排序后的最后3个任务
        var lastThreeTasks = PresupuestoTarea.OrderBy(a => a.FechaAlta).TakeLast(3);
        foreach (var item in lastThreeTasks)
        {
            result = item.Descripcion + " " + result;
        }
        return result.Trim();
    }
}

方案对比 #

• 前端处理：无需后端改动，可灵活调整显示数量，适合前端独立控制展示规则的场景。
• 后端处理：减少前端数据传输量（任务较多时更明显），前端直接渲染即可，适合需要统一展示规则的系统。

内容的提问来源于stack exchange，提问作者Kike gonzalez