我有一个 Vuetify 数据表
<v-data-table
:headers="headers"
:items="members"
item-key="id"
v-model="selected"
:search="search"
>
<template slot="items" slot-scope="props">
<tr :active="props.selected" @click="select(props.item)">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.FirstName}}</td>
<td class="text-xs-right">{{ props.item.LastName }}</td>
<td class="text-xs-right">{{ props.item.email }}</td>
<td class="text-xs-right">{{ props.item.department}}</td>
<td class="text-xs-right">{{ props.item.division}}</td>
</tr>
</template>
当我选择一行时,我希望能够在同一页面上填充一个项目,其中包含一些数据,例如 v-card 中的姓名和电子邮件。我目前有
{{消息}}
在我的脚本中我有
return {
msg: "",
然后
select(selectedItem) {
this.selected = [];
this.members.forEach(item => {
if (item.id == selectedItem.id) {
this.selected.push(item);
this.msg = selectedItem.FirstName;
}
});
},
我需要将名称放入消息中。我觉得我正在走很长的路来获取我的数据,并且想知道是否有人有更好的解决方案。感谢您的支持。
请您参考如下方法:
<v-data-table @click:row="rowClick" item-key="name" single-select ...
methods: {
rowClick: function (item, row) {
row.select(true);
//item - selected item
}
}
<style>
tr.v-data-table__selected {
background: #7d92f5 !important;
}
</style>
或者
<style scoped>
/deep/ tr.v-data-table__selected {
background: #7d92f5 !important;
}
</style>
例子
https://codepen.io/nicolai-nikolai/pen/GRgLpNY