So fangen Sie die letzten 3 Zeichen einer Zeichenfolge ab und zeigen sie an

Question

Eine Liste von Objekten. Was ich brauche, ist, wenn ich die Aufgabenkette zu lang mache, die Tabelle kaputt geht oder hässlich aussieht, dann möchte ich die Kette durchschneiden und die letzten 3 Aufgaben anzeigen, hier zeigt es mir ein paar Das Bild davon Aufgabe, es kehrt zurück

data:[{tasks:"Aufgabe 1 Aufgabe 2 Aufgabe 3 Aufgabe 4}] Alle Aufgaben können hinzugefügt werden, daher möchte ich die letzten 3 Aufgaben ausschneiden und anzeigen. Dadurch wird meine Tabelle nicht beschädigt.

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

  

    

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