Cara memintas dan memaparkan 3 aksara terakhir daripada rentetan

Question

Senarai objek, apa yang saya perlukan adalah jika saya membuat rantai tugas terlalu panjang ia memecahkan meja atau kelihatan hodoh, kemudian saya ingin memotong rantai dan menunjukkan 3 tugasan terakhir, di sini ia menunjukkan kepada saya beberapa Imej tugas, ia kembali

data:[{tugasan:"Tugas 1 Tugasan 2 Tugasan 3 Tugasan 4}] Semua tugasan boleh ditambah, jadi saya ingin memotong dan menunjukkan 3 tugasan terakhir. Dengan cara ini jadual saya tidak akan rosak.

<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

Saya hanya menambah jawapan saya berdasarkan pernyataan masalah yang anda nyatakan dalam dua perenggan pertama, kerana mengkaji keseluruhan kod adalah seperti perangkap.

Anda boleh mencapai ini dengan bantuan compulatedproperties. Anda boleh memotong semua elemen yang tinggal dalam tatasusunan, hanya menyimpan 3 elemen terakhir.

Demo Langsung:

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