如何从字符串中截取并显示最后3个字符

Question

一个对象列表，我需要的是，如果我让任务链太长，它会破坏桌子，或者看起来很难看，那么我想切断链条并显示最后 3 个任务，在这里它向我显示了几个任务的图像，它返回的是

data:[{tasks:"任务 1 任务 2 任务 3 任务 4}] 可以添加所有任务，所以我想剪切并显示最后 3 个任务。这样我的表格就不会损坏。

<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);
    });
},

[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);

var list = new List<Presupuesto>();

foreach (var presupuesto in result.ToList())
{
    //presupuesto.PresupuestoDetalle = presupuesto.PresupuestoDetalle.Where(a => a.EsPrimerCristal == true).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;
 }


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

Answer 1

我只是根据您在前两段中提到的问题陈述添加我的答案，因为研究整个代码就像一个陷阱。

您可以借助compulated属性来实现这一点。您可以对数组中的所有剩余元素进行切片，只保留最后 3 个元素。

现场演示：

new Vue({
  el: '#app',
  data: {
    originalObject: [{
      id: 1,
      tipoPresupuestoString: 'tipoPresupuestoString 1',
      numero: 'Numero 1',
      fechaEntrega: 'fechaEntrega 1',
      presupuestoComentarioString: 'presupuestoComentarioString 1',
      tareas: 'tareas 1',
      cliente: {
        nombre: 'nombre 1'
      }
    }, {
      id: 2,
      tipoPresupuestoString: 'tipoPresupuestoString 2',
      numero: 'Numero 2',
      fechaEntrega: 'fechaEntrega 2',
      presupuestoComentarioString: 'presupuestoComentarioString 2',
      tareas: 'tareas 2',
      cliente: {
        nombre: 'nombre 2'
      }
    }, {
      id: 3,
      tipoPresupuestoString: 'tipoPresupuestoString 3',
      numero: 'Numero 3',
      fechaEntrega: 'fechaEntrega 3',
      presupuestoComentarioString: 'presupuestoComentarioString 3',
      tareas: 'tareas 3',
      cliente: {
        nombre: 'nombre 3'
      }
    }, {
      id: 4,
      tipoPresupuestoString: 'tipoPresupuestoString 4',
      numero: 'Numero 4',
      fechaEntrega: 'fechaEntrega 4',
      presupuestoComentarioString: 'presupuestoComentarioString 4',
      tareas: 'tareas 4',
      cliente: {
        nombre: 'nombre 4'
      }
    }, {
      id: 5,
      tipoPresupuestoString: 'tipoPresupuestoString 5',
      numero: 'Numero 5',
      fechaEntrega: 'fechaEntrega 5',
      presupuestoComentarioString: 'presupuestoComentarioString 5',
      tareas: 'tareas 5',
      cliente: {
        nombre: 'nombre 5'
      }
    }]
  },
  computed:{
    presupuestos() {
      return this.originalObject ? this.originalObject.slice(-3) : this.originalObject
    }
  }
})

table, td {
  border: 1px solid black;
}

sssccc

  

    

      
{{ item.tipoPresupuestoString }}
      
{{ item.numero }}
      
{{ item.cliente.nombre }}
      
{{ item.fechaEntrega }}
      
{{ item.presupuestoComentarioString }}
      
{{ item.tareas }}