一個物件列表,我需要的是,如果我讓任務鏈太長,它會破壞桌子,或者看起來很難看,那麼我想切斷鏈條並顯示最後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]
P粉3126316452024-03-23 00:48:50
我只是根據您在前兩段中提到的問題陳述添加我的答案,因為研究整個程式碼就像一個陷阱。
您可以藉助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 }}