绘制选定的行值js

Question

下面我展示了我想要达到的效果。我在一个简单表中有一个按钮。它的功能是选择我所站的那一排。寻找一些信息，但是我唯一得到的是我选择了整个行。这是我的桌子。

<v-simple-table fixed-header height="300px">
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Tipo</th>
<th class="text-left">Numero trabajo</th>
<th class="text-left">Cliente</th>
<th class="text-left">Entrega</th>
<th class="text-left">Comentario</th>
<th class="text-left">Tareas</th>
<th class="text-right">Acciones</th>
</tr>
</thead>
<tbody>
<tr v-for="item in presupuestos" :key="item.id" :style="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>
<td class="text-right">
<v-icon
title="Seleccionar OT"
@click="selectedPresupuesto(item)"
>mdi-tab-search</v-icon
>
<v-icon title="Nueva Tarea" @click="abrirPopupNuevaTarea(item)"
>mdi-hospital</v-icon
>
<v-icon
title="Listado de Tareas"
@click="abrirPopupListadoTarea(item)"
>
mdi-archive-edit-outline
</v-icon>
<v-icon
title="Agregar comentario"
class="ml-2"
@click="popUpComentario(item)"
>mdi-message</v-icon
>
<v-icon title="Descargar" class="text-center" @click="download(item)"
>mdi-download</v-icon
>
</td>
</tr>
</tbody>
</template>
</v-simple-table>

通过这个带有@click="selectedBudget(item)"的图标，我必须选择整行。(项目中包含所有数据)

data() {
return {
selected: false,
TheStyle: {
backgroundColor: "",
},
};

这里的方法是:

selectedPresupuesto(item) {
this.presupuestoSeleccionado = item;
this.$data.TheStyle.backgroundColor = "grey";
},

附图:

输入图片描述

Answer 1

使用index而不是boolean，并以bind样式设置条件:

new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
presupuestos: [{id: 1, numero: 1, cliente: {nombre: 'aaa'}, tareas: 'ff'}, {id: 2, numero: 2, cliente: {nombre: 'bbb'}, tareas: 'dd'}],
selected: null,
theStyle: { backgroundColor: "", },
}
},
methods: {
selectedPresupuesto(item) {
// 👇 set index 
this.selected = item;
this.theStyle.backgroundColor = "grey";
},
}
})

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-main>
<v-container>
<v-simple-table fixed-header height="300px">
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Numero trabajo</th>
<th class="text-left">Cliente</th>
<th class="text-left">Tareas</th>
<th class="text-right">Acciones</th>
</tr>
</thead>
<tbody>
<!-- 👇 use index in loop -->                 <!-- 👇 set condition -->
<tr v-for="(item, index) in presupuestos" :key="item.id" :style="index == selected && theStyle">
<td>{{ item.numero }}</td>
<td>{{ item.cliente.nombre }}</td>
<td>{{ item.tareas }}</td>
<td class="text-right">
<!-- 👇 pass index -->
<v-icon
@click="selectedPresupuesto(index)"
title="Seleccionar OT"
>mdi-tab-search</v-icon
>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>