我有一个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卡中的姓名和电子邮件)填充同一页面上的项目。我目前有 {{msg}}
在我的脚本中,
return {
msg: "",
然后
select(selectedItem) {
this.selected = [];
this.members.forEach(item => {
if (item.id == selectedItem.id) {
this.selected.push(item);
this.msg = selectedItem.FirstName;
}
});
},
我需要在msg中输入名称。我觉得我要走很长一段路才能获取我的数据,并且想知道是否有人有更好的解决方案。感谢您的支持。
答案 0 :(得分:9)
<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>
答案 1 :(得分:1)
由于数据表和this.selected
之间存在绑定,因此只需要填充msg
作为组件的计算属性即可。您无需通过监听this.selected
事件来手动添加到click
。
computed: {
msg() {
const selectedRow = this.selected[0];
return selectedRow ? `${selectedRow.firstName} ${selectedRow.lastName}` : "no data selected";
}
}
我添加了一个最小的示例。请注意,对于v-data-table的item-key属性,应使用唯一值。
<template>
<v-card>
<v-card-text>
<v-data-table :headers="headers" :items="members" v-model="selected" item-key="id">
<template slot="items" slot-scope="props">
<td>
<v-checkbox
v-model="props.selected"
:disabled="!props.selected && selected.length != 0"
:indeterminate="!props.selected && selected.length != 0"
></v-checkbox>
</td>
<td>{{ props.item.firstName}}</td>
<td>{{ props.item.lastName }}</td>
</template>
</v-data-table>
{{ msg }}
</v-card-text>
</v-card>
</template>
<script>
export default {
data() {
return {
headers: [
{ text: "Select", value: "id", sortable: false },
{ text: "First Name", value: "firstName", sortable: true },
{ text: "Last Name", value: "lastName", sortable: true }
],
selected: [],
members: [
{
id: 1,
firstName: "a",
lastName: "b"
},
{
id: 2,
firstName: "x",
lastName: "y"
}
]
};
},
computed: {
msg() {
const selectedRow = this.selected[0];
return selectedRow ? `${selectedRow.firstName} ${selectedRow.lastName}` : "no data selected";
}
}
};
</script>