我使用 v-data-table 在 vuetify 中有这个简单的记录。
我正在制作一个用于添加数据的可编辑单元格。因此，一旦您单击任何列单元格，就会出现一个弹出编辑窗口来编辑数据。
但是，我不希望用户在此否和名称列上进行编辑，因为它是固定数据。
我只想编辑此结果列(在单元格中添加数据)。
我怎样才能实现这个功能？
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
headers: [{text: 'No', sortable: false, value: 'number'},
{text: 'Name', sortable: false, value: 'name'},
{text: 'Result', sortable: false, value:'result'}],
records: [{name:'data 1'},{name:'data 2'},{name:'data 3'}],
}
},
computed: {
itemsWithIndex() {
return this.records.map(
(records, index) => ({
...records,
number: index + 1
}))
}
}
})#app {
padding: 1rem;
}
#table-card {
padding: 2rem;
}<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.1.12/vuetify.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.1.12/vuetify.min.js"></script>
</head>
<div id="app">
<v-app>
<v-card id="table-card">
<h3>Records</h3>
<v-data-table
:headers="headers"
:items="itemsWithIndex"/>
<template
v-for="header in headers"
v-slot:[`item.${header.value}`]="props"
>
<v-edit-dialog
:key="header.value"
:return-value.sync="props.item[header.value]"
>
{{ props.item[header.value] }}
<template v-slot:input>
<v-text-field
v-model="props.item[header.value]"
label="Edit"
single-line
></v-text-field>
</template>
</v-edit-dialog>
</template>
</v-card>
</v-app>
</div>最佳答案
当前，您正在所有单元格上设置编辑对话框:
<template
v-for="header in headers"
v-slot:[`item.${header.value}`]="props"
>
<v-edit-dialog
:key="header.value"
:return-value.sync="props.item[header.value]"
>
...
相反，仅在结果列上设置它:
<template v-slot:item.result="{item, header}">
<v-edit-dialog
:key="header.value"
:return-value.sync="item[header.value]"
>
...
或者，如果您只想排除几列，请保留 v-for，但让它迭代已过滤的标题列表。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
headers: [{text: 'No', sortable: false, value: 'number'},
{text: 'Name', sortable: false, value: 'name'},
{text: 'Result', sortable: false, value:'result'}],
records: [{name:'data 1'},{name:'data 2'},{name:'data 3'}],
}
},
computed: {
itemsWithIndex() {
return this.records.map(
(records, index) => ({
...records,
number: index + 1
}))
}
}
})#app {
padding: 1rem;
}
#table-card {
padding: 2rem;
}<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.1.12/vuetify.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.1.12/vuetify.min.js"></script>
</head>
<div id="app">
<v-app>
<v-card id="table-card">
<h3>Records</h3>
<v-data-table
:headers="headers"
:items="itemsWithIndex"/>
<template v-slot:item.result="{item, header}">
<v-edit-dialog
:key="header.value"
:return-value.sync="item[header.value]"
>
{{ item[header.value] }}
<template v-slot:input>
<v-text-field
v-model="item[header.value]"
label="Edit"
single-line
></v-text-field>
</template>
</v-edit-dialog>
</template>
</v-card>
</v-app>
</div>关于vue.js - 虚拟化 : Editable cell for v-data-table in specified column only，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76041836/