hello早上好,我有一个问题,我有2张桌子,一个主桌子上有一个按钮,可以打开第二个桌子的弹出窗口。 有什么想法?如果我单击第一个表和第一个选项的按钮,它只需要向我展示该元素的信息,在弹出窗口中,我会制作一个console.log(item.ID),它很好地向我显示了该元素的数据,但是当我打开弹出窗口时,它会显示所有数据。
<template>
<v-card>
<v-card-title>
Control Modificaciones
</v-card-title>
<v-card-text>
<v-row>
<v-col cols="12" md="3" class="ml-3">
<v-text-field
v-model="fechaDesde"
type="date"
label="Fecha Desde"
:rules="[(v) => !!v || 'Este campo es requiredo']"
required
></v-text-field>
</v-col>
<v-col cols="12" md="3" class="ml-3">
<v-text-field
v-model="fechaHasta"
type="date"
label="Fecha Hasta"
:rules="[(v) => !!v || 'Este campo es requiredo']"
required
></v-text-field>
</v-col>
<v-btn color="info" title="Crear" class="mt-6 ml-8" @click="buscar()">
Buscar
</v-btn>
</v-row>
</v-card-text>
<v-row>
<v-col cols="8" md="8" class="ml-3">
<v-card-text>
<v-simple-table>
<template>
<thead>
<tr>
<th class="text-left">Nro Orden</th>
<th class="text-left">Cliente</th>
<th class="text-left">Tipo</th>
<th class="text-left">Fecha Creacion</th>
<th class="text-left">Fecha Ult Modificacion</th>
<th class="text-left">Cant Modificada</th>
<th class="text-left">Acciones</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.numero }}</td>
<td>{{ item.cliente.nombre }}</td>
<td>{{ item.tipoPresupuestoString }}</td>
<td>{{ formatDate(item.fechaAlta) }}</td>
<td>{{ formatDate(item.fechaModificacion) }}</td>
<td>{{ item.numero }}</td>
<td>
<v-icon
title="Historial del presupuesto"
@click="abrirPopupListadoPresupuestoHistorial(item)"
>mdi-clipboard-text-clock-outline</v-icon
>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card-text>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="12" class="ml-3">
<v-dialog
v-model="popupPresupuestoHistorial"
class="ml-10"
max-width="800px"
max-height="700px"
>
<v-card>
<v-card-title class="text-h3 dark lighten-2">
Listado de Presupuesto Historial.
</v-card-title>
<v-card-text>
<v-simple-table>
<template>
<thead>
<tr>
<th class="text-left">Fecha</th>
<th class="text-left">Comentario</th>
<th class="text-left">Usuario</th>
<th class="text-left">Datos Generales</th>
<th class="text-left">Articulos Nuevos</th>
<th class="text-left">Articulos Modifados</th>
<th class="text-left">Articulos Eliminados</th>
<th class="text-left">Acciones</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ formatDate(item.fecha) }}</td>
<td>{{ item.observacion }}</td>
<td>{{ item.usuario.name }}</td>
<td>{{ item.datosCabecera }}</td>
<td>{{ item.articulosNuevos }}</td>
<td>
{{ item.articulosModificados }}
</td>
<td>
{{ item.articulosEliminados }}
</td>
<td></td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
text
color="primary"
@click="popupPresupuestoHistorial = false"
>
Cancelar
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-col>
</v-row>
</v-card>
</template>
<script>
import moment from "moment";
import PresupuestoServices from "../../services/PresupuestoServices";
import Swal from "sweetalert2";
export default {
name: "ControlModificaciones",
data() {
return {
fechaHasta: null,
fechaDesde: null,
list: [],
popupPresupuestoHistorial: false,
};
},
created() {
this.presupuestoServices = new PresupuestoServices();
},
mounted() {},
methods: {
showSuccess(message) {
this.$toastr.Add({
name: "UniqueToastName",
title: "Success Message",
msg: message,
type: "success",
});
},
showError(message) {
this.$toastr.Add({
name: "UniqueToastName",
title: "Error Message",
msg: message,
type: "error",
});
},
formatDate(value) {
return value ? moment(value).format("DD/MM/YYYY") : "";
},
buscar() {
if (this.fechaDesde == null && this.fechaHasta == null) {
Swal.fire("Primero debes seleccionar las fechas.");
return;
}
const fechaDesde = this.fechaDesde != null ? this.fechaDesde : null;
const fechaHasta = this.fechaHasta != null ? this.fechaHasta : null;
Swal.fire({
title: "Espere unos momentos ...",
showConfirmButton: false,
});
this.presupuestoServices
.controlModificaciones(fechaDesde, fechaHasta)
.then((data) => {
Swal.close();
this.list = data;
})
.catch((error) => {
Swal.close();
this.showError(error.response.data);
});
},
abrirPopupListadoPresupuestoHistorial(item) {
this.popupPresupuestoHistorial = true;
console.log(item.id);
// this.list[0].presupuestoHistorial = item.id;
},
},
};
</script>
<tr v-for="item in list" :key="item.id">
这条线基本上是在整个项目列表上循环,并且根本不使用您选择的项目。添加到您的数据功能的新属性以存储所选项目。将所选项目分配给该属性并在弹出窗口中使用它来渲染您需要的任何详细信息。
在v-dialog
list
abrirPopupListadoPresupuestoHistorial
方法中传递的项目ID从列表数组中滤除对象
您将仅在对话框内显示选定的项目详细信息。您可以直接绑定过滤的对象而不是使用V-FOR,因为它始终包含所选的
<v-dialog>
详细信息。您可以使用array.find()
方法仅根据传递的ID获取对象。
item.id
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
popupPresupuestoHistorial: false,
list: [{
id: 1,
observacion: 'observacion 1',
name: 'name 1'
}, {
id: 2,
observacion: 'observacion 2',
name: 'name 2'
}, {
id: 3,
observacion: 'observacion 3',
name: 'name 3'
}, {
id: 4,
observacion: 'observacion 4',
name: 'name 4'
}, {
id: 5,
observacion: 'observacion 5',
name: 'name 5'
}],
dialogList: []
}
},
methods: {
openDialog(itemID) {
this.popupPresupuestoHistorial = true;
this.dialogList = this.list.find(({ id }) => id === itemID)
}
}
})